精华内容
下载资源
问答
  • vue中修改data数据的方法

    万次阅读 2019-12-16 11:10:06
    有的时候,当我们手动对data的数据修改时,vue却监听不到这些数据的变化,导致页面没有触发新一轮的更新。 注意:出现以上问题的原因在于,没有通过vue提供的方法对保存在data的数据进行修改。强制性通过js对...

    vue的data中保存一些数据,用于页面的渲染。有的时候,当我们手动对data中的数据修改时,vue却监听不到这些数据的变化,导致页面没有触发新一轮的更新。

    注意:出现以上问题的原因在于,没有通过vue提供的方法对保存在data中的数据进行修改。强制性通过js对数据修改的那些方法,有一部分在vue中是不被认可的。

    vue中修改简单类型数据

    简单类型的数据,包括number boolean bigInt string 等
    修改这类型的数据,我们可以直接赋值,vue也能监听到数据发生的变化,然后作出修改。

    xxxx表示变量名,yyyy则是要赋值的新值。

    this.$data.xxxx = yyyy
    或
    this.xxxx = yyyy
    

    vue中修改数组的方法:

    一、变异方法(7个):push ,shift, unshift, pop, sort, splice, reverse
    这些方法在与js基本一致(推荐)

    push
    此方法是在数组的后面添加新加元素,此方法改变了数组的长度
    +++++++++++++++++++++++++++++++++++++++++++++++++++
    pop
    此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度
    +++++++++++++++++++++++++++++++++++++++++++++++++++
    shift
    此方法在数组后面删除第一个元素,并返回数组,此方法改变了数组的长度
    +++++++++++++++++++++++++++++++++++++++++++++++++++
    unshift
    此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度
    +++++++++++++++++++++++++++++++++++++++++++++++++++
    splice
    Array.splice(开始位置, 删除的个数,替换的元素) 万能方法,可以实现增删改
    +++++++++++++++++++++++++++++++++++++++++++++++++++
    sort
    该方法用于对数组进行排序
    +++++++++++++++++++++++++++++++++++++++++++++++++++
    reverse
    该方法用于将数组的内容倒置
    +++++++++++++++++++++++++++++++++++++++++++++++++++

    二、set方法(推荐)
    this. s e t 这 是 v u e 实 例 调 用 set 这是vue实例调用 setvueset()方法,专门用来修改数组的
    第一个参数,已经存在data中的数据,要被修改的数组
    第二个参数,要修改的数组下标
    第三个参数,要修改的数组对应下标的值

    this.$set (this.selectedarr, index, option)
    
    data() {
    	return {
    		textArray: ["1","2","3"]
    	}
    }
    
    修改最后一个为"4"
    this.$set (this.textArray, 2, "4")
    

    +++++++++++++++++++++++++++++++++++++++++++++++++++

    三、用一个全新的数组替换原先的数组,而不是在原先数组上修改(不推荐)

    data() {
    	return {
    		textArray: ["1","2","3"]
    	}
    }
    
    修改最后一个为"4"
    this.textArray = ["1","2","4"]
    

    简单总结一下,这三种修改数组的方法,最后一种不推荐,因为这会引起vue中整个数组数据对应的页面重新渲染,而我们明明只想改变数组中的某一个元素。

    vue中修改对象的方法:

    一、方法直接改(如果对象数据过于复杂,层次很深的话,不推荐)

    this.obj.dengxi = 'dengxi' 
    

    二、使用vue的实例提供的方法进行操作(推荐,vue监听了这个方法,做到更好的更新渲染)

    this.$set(vm.obj,'dengxi','dengxi好帅')
    

    三、通过vue构造函数提供的方法来改变(推荐,这个其实和第二种方法一样)

    Vue.set(this.obj,'dengxi','dengxi真的好帅')
    

    关于删除
    如果想要将对象中的某一个键值对应的value删掉
    一、可以通过上面的三种方法,将其设置为空(推荐,粗暴简单,但有效)

    this.obj.dengxi = null
    

    二、vue实例提供的删除方法(推荐)

    this.$delete(this.obj,'yangxi')
    

    三、vue构造函数提供的方法(其实和第二种一样,推荐)

    Vue.delete(this.obj,'dengxi')
    

    四、创建一个新对象,覆盖之前的对象,vue仍能实现更新(不推荐)

    this.obj = {....}
    

    都看到这里了,求点赞,关注,评论,感谢各位大佬的支持,是我继续创作的动力。

    在这里插入图片描述

    展开全文
  • 今天小编就为大家分享一篇vue中更改数组属性,在页面不生效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中修改css属性无效

    千次阅读 2019-10-30 18:03:57
    vue中修改css属性无效,img设置的宽度无效,p设置的颜色有效 <template> <div> <carousel></carousel> <p> 555555</p> </div> </template>...

    问题描述

    vue中修改css属性无效,img设置的宽度无效,p设置的颜色有效

    <template>
        <div>           
             <carousel></carousel>     
            <p> 555555</p>
        </div>
    </template>
    
    <script>
        import carousel from './carousel.vue';
        export default {
            name: "home",
            components: {
                carousel
            }
        }
    </script>
    
    <style rel="stylesheet/scss" lang="scss" scoped>
    
     img{
            width: 100%;
        }
    p{
        color: red;
    }
    </style>
    

    问题解决过程

    使用F12代码调试
    elements页面,发现img的宽度属性没有覆盖,甚至没有出现,不是权重的问题。
    查看sources,发现css文件里面有我编写的img宽度属性,不是scss编译的问题。

    尝试使用其他标签选择器修改属性,发现修改p标签的属性有效,观察他们两个的区别,发现template中没有img标签,猜测可能时该css只能修改当前组件的属性。

    问题出现原因

    没有仔细查看官方文档,scoped表示当前style只对当前组件有效,避免组件间样式相互影响

    <style scoped>
    </style>
    

    问题解决方案

    • 去除scoped
    • 在对应组件修改img属性
    <template>
        <a-carousel arrows>
            <div
                    slot="prevArrow"
                    slot-scope="props"
                    class="custom-slick-arrow"
                    style="left: 10px;zIndex: 1"
            >
                <a-icon type="left-circle" />
            </div>
            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right-circle" />
            </div>
            <div><img src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/official/about1.jpg"></img></div>
            <div><img src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/official/about1.jpg"></img></div>
            <div><img src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/official/about1.jpg"></img></div>
            <div><img src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/official/about1.jpg"></img></div>
        </a-carousel>
    </template>
    <script>
        export default {};
    </script>
    <style scoped>
        /*样式覆盖*/
        img{
            width: 100%;
        }
        /* For demo */
        .ant-carousel >>> .slick-slide {
            text-align: center;
            height: 160px;
            line-height: 160px;
            background: #364d79;
            overflow: hidden;
        }
    
        .ant-carousel >>> .custom-slick-arrow {
            width: 25px;
            height: 25px;
            font-size: 25px;
            color: #fff;
            background-color: rgba(31, 45, 61, 0.11);
            opacity: 0.3;
        }
        .ant-carousel >>> .custom-slick-arrow:before {
            display: none;
        }
        .ant-carousel >>> .custom-slick-arrow:hover {
            opacity: 0.5;
        }
    
        .ant-carousel >>> .slick-slide h3 {
            color: #fff;
        }
    </style>
    

    感想

    还是对解决问题的流程不够熟悉,导致解决问题耗费过长的时间。

    1. 确认Bug是否在本地可以重现。
    2. 确认Bug在哪一段代码中。
    3. 去除掉所有无关代码,只去调试和Bug相关的代码。
    4. 和之前正常运行的版本对比,尝试恢复到之前可以正常运行的代码。
    5. 重新写一个小Demo,确认是否可以正常运行,可以的话,移动代码到原有的代码中。
    6. 如果本地无法重现,打日志,观察线上行为。
    7. 重启服务,重启IDE,重启笔记本,重启服务器。
    8. 跟产品经理说这个Bug解决不了,花费的代价很大,不值得。
    展开全文
  • Vue中修改数组的对象

    千次阅读 2020-02-15 00:46:25
    Vue 是无法检测到根据索引值修改的数据变动的。 解决方法 // 数组:第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值 // 对象:第一个参数是要修改的对象, 第二个值是修改属性...

    问题

    根据数组的索引直接赋值没法修改数组的中对象。

    this.classes[1]= {id:123,name:'计应171班'};
    

    原因

    在 Vue 中是无法检测到根据索引值修改的数据变动的。

    解决方法

    // 数组:第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值
    // 对象:第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值
    this.$set(this.classes,1,{id:123,name:'计应171班'});
    或者
    Vue.set(this.classes,1,{id:123,name:'计应171班'})
    

    结语

    示例代码修改的是数组,对象同理,方法在代码注释中已给出。

    展开全文
  • Vue中更改表格的某一行选项值的操作 结合后端接口,进行相应的传参 Id, state值等,因相关组件库的方法说明比较简单,有些需要自己去尝试,如下图change()方法的传参等 代码实现: 组件库的方法介绍: ...

    Vue中更改表格中的某一行选项值的操作

    结合后端接口,进行相应的传参 Id, state值等,因相关组件库中的方法说明比较简单,有些需要自己去尝试,如下图中change()方法的传参

    //ajax发送请求的相关方法:
    get : 获取  ,
    post: 新增 ,
    put/patch : 更改,
    delete:  删除
    

    代码实现:
    在这里插入图片描述

    组件库中的方法介绍:
    在这里插入图片描述

    接口示例:
    在这里插入图片描述

    效果:
    在这里插入图片描述

    展开全文
  • Vue中更改vue.config.js配置文件,一定要重启!!或者配置项更改并不会生效!!!
  • 关于vue中修改页面的title和对template的理解 修改页面的title 1.在main.js添加以下内容 一定要记得加在new vue前 在router里面对应路由上添加以下内容 最后效果如下 template的理解 ...
  • vue中修改swiper样式

    千次阅读 2019-06-23 23:40:00
     vue单文件组件无法修改swiper样式。 解决  1,单文件组件:新增一个style 不加scoped 让它最终成为全局样式。只在其中操作swiper的样式。 <style lang="scss"> .swiper-container{ .swiper-...
  • 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组的edit属性后,页面并没有如预期...
  • vue中修改伪元素

    千次阅读 2019-04-09 11:22:59
    写两个类 然后利用vue动态的css写
  • 如何在vue中修改组件库的样式? vue中我们经常会使用一些第三方的组件库,可以达到快速搭建项目界面布局的效果,无非就是用什么组件库的问题。 但是,不管我们使用element ui、vuetify或是别的什么组件库,修改样式...
  • 基于vue2.5.9版本vue中修改了数据但视图无法更新的情况 最近的项目需要用vue处理数组和json的数据类型发现一些问题在这里简单的列举一下;因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 附上文档链接...
  • vue中修改了数据但视图无法更新的情况 标签: vue 2017-08-14 10:24 2147人阅读 评论(0) 收藏 举报 分类: vue(4) 我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此...
  • Vue中修改浏览器图标Logo

    千次阅读 2019-10-25 15:43:01
    1.找到index.html文件 2.修改这段代码的图片 <link rel="icon" type="image/x-icon" href="./src/assets/icon/Vue.png"> 3.图标没有变化的话清除一下游览器缓存
  • vue 直接使用 class 修改组件的默认样式,在使用 scoped 之后,样式是没有效果。 此时可以使用div 包裹组件,deep 可以实现修改组件样式 .lxfix /deep/ .control-label{ margin-top: 5px; } .lxfix /...
  • vue 修改数据 更新视图

    千次阅读 2019-04-26 10:19:50
    Vue.set( target, key, value ) 参数: ... 向响应式对象添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属...
  • Vue中修改浏览器标题和图标

    千次阅读 2019-07-01 15:04:14
    1.引入图标,在index.html引入 ...link rel="icon" type="image/x-icon" href="./src/assets/icon/Vue.png"> <!DOCTYPE html> <html lang="en"> <head> <meta chars...
  • vue中修改props传进来的值

    千次阅读 2020-01-27 21:52:02
    总所周知,vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的值,但总有需要修改的时候。 前段时间一个项目有遇到上述情况,假设我直接传进来一个list,当时我直接在里面改了list,但是却惊讶的...
  • vue中修改别名(alias)

    千次阅读 2020-02-25 20:23:22
    因为使用的是最新的脚手架工具 @vue/cli ,它不会生成任何webpack文件,所以需要手动创建。 根据官方文档 :需要创建vue.config.js 还有一个坑,就是没有安装 path ,导致无法解析路径 下面上代码就懂了 const ...
  • vue修改data的对象,更新不到页面上去? Object.assign浅拷贝 然后强制刷新视图. this.detail = Object.assign({}, this.detail, i); this.$forceUpdate();
  • vue中修改浏览器的小图标

    千次阅读 2019-02-27 20:24:09
    在目录结构在的index.html,写入如下代码: &lt;link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico"&gt; 效果图:
  • vue中修改css样式和添加CSS样式

    万次阅读 2018-09-04 10:32:39
    calss语法格式=&amp;amp;amp;gt; :class=”{ ’ a ’ : f }” a表示添加的css样式,f 表执行条件,满足条件就添加写好的Css样式。...Q表示具体修改的Css样式,R表示修改的值。用于修改CSS某一个样式。...
  • 1、下载所需要的字体,.ttf格式本文以(PingFang.ttf 为例) 底下将会附加苹果...2、在src下新建common文件,文件夹包含以下文件 3、打开font.css @font-face { font-family: 'PingFang'; //重命名字体名 s...
  • 我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1、v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法...
  • 也就是说当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象添加新的属性,如果更新此属性的值,是不会更新视图的。 简单粗暴的解决方案: 在给对象添加属性时采用:this.$set...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 221,296
精华内容 88,518
关键字:

vue中更改

vue 订阅