Vue $set $nextTick $delete

最新推荐文章于 2024-06-07 15:57:49 发布

Posden

最新推荐文章于 2024-06-07 15:57:49 发布

阅读量541

点赞数

分类专栏： Vue 文章标签： Vue set nextTick delete

本文链接：https://blog.csdn.net/weixin_44420276/article/details/89468240

版权

Vue 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

1.$set

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        {{msg}}
        <div>
            <p @click="add(obj)">{{obj.a}}</p>
            <p @click="sub(obj)">{{obj.b}}</p>
        </div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'sss',
                obj:{}
            },
            mounted() {
                this.obj = {a:0};
                this.obj.b = 0;
                console.log("test1",this.obj)
            },
            methods: {
                add(item){
                    item.a = item.a + 1;
                    console.log("add++",item)
                },
                sub(item){
                    item.b = item.b+1;
                    console.log("sub++",item)
                }
            },
        })
    </script>  
</body>
</html>

在这里插入图片描述
可以看出a属性是有get 和 set方法的，而新增的b属性是没有的。

在这里插入图片描述
点了四次a,及时更新，点了一次b,不更新，点了一次a, a,b同时更新了

由此可以看出，更新新增属性b，是不会更新视图，但是会改变其值，当更新原有属性a时会更新视图，同时将新增的属性b的值也更新到视图里边

解决方案

            mounted() {
                this.obj = {a:0};
                // this.obj.b = 0;
                this.$set(this.obj,'b',0)
                console.log("test1",this.obj)
            },

在这里插入图片描述

2.Vue.nextTick( [callback, context] )

在这里插入图片描述

	<mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="home">
          <img slot="icon" src="./assets/img/index.png" @click="changeHash">
          首页
        </mt-tab-item>
        <mt-tab-item id="member">
          <img slot="icon" src="./assets/img/vip.png" @click="changeHash">
          会员
        </mt-tab-item>
        <mt-tab-item id="shopcart">
          <img slot="icon" src="./assets/img/shopcart.png" @click="changeHash">
          购物车
        </mt-tab-item>
        <mt-tab-item id="search">
          <img slot="icon" src="./assets/img/find.png" @click="changeHash">
          查找
        </mt-tab-item>
      </mt-tabbar>

  methods: {
    changeHash () {
      // 该调用早于 子组件赋值父组件的selected
      this.$nextTick(function () {
        this.$router.push({
          name: this.selected
        })
        // console.log(this.selected)
      })
    }
  }
  // watch: {
  //    selected (newV, oldV) {
  //     this.$router.push({
  //        name: newV
  //      })
  //    }
  // }

3.delete

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        {{msg}}
        <div>
            <p @click="add(obj)">{{obj.a}}</p>
            <p @click="sub(obj)">{{obj.b}}</p>
        </div>
        <ul>
            <li v-for="item in newsLists">{{item.a}}==={{item.b}}</li>
        </ul>
        <div @click="btn">删除</div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'sss',
                obj:{},
                newsLists:[
                    {a:1,b:2},
                    {a:3,b:4},
                    {a:4,b:4},
                    {a:5,b:4}
                ]
            },
            mounted() {
                this.obj = {a:0};
                // this.obj.b = 0;
                this.$set(this.obj,'b',0)
                console.log("test1",this.obj)
            },
            methods: {
                add(item){
                    item.a = item.a + 1;
                    console.log("add++",item)
                },
                sub(item){
                    item.b = item.b + 1;
                    console.log("sub++",item)
                },
                btn(){
                    this.$delete(this.newsLists,0)
                    //delete this.newsLists[0]
                    console.log(this.newsLists)
                }
            },
        })
    </script>  
</body>
</html>

在这里插入图片描述

Posden

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue $set $nextTick $delete

1.$set在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m...
复制链接

扫一扫

专栏目录