vue.js之Vue.set与Vue.filter

最新推荐文章于 2022-10-19 14:38:08 发布

我在人间贩卖青春

最新推荐文章于 2022-10-19 14:38:08 发布

阅读量652

点赞数

分类专栏： vue.js 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_44178305/article/details/121322631

版权

vue.js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

vue.set

官方解释：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
由于 JavaScript 的限制，Vue 不能检测出数据的改变，所以当我们需要动态改变数据的时候，Vue.set()完全可以满足我们的需求
常见的坑就是直接改变了data中复杂类型变量的属性值，视图没有更新
Vue.set( target, key, value )
- target：要更改的数据源(可以是对象或者数组)
- key：要更改的具体数据
- value ：重新赋的值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button class="btn" @click="btnChange()">改变data中的值</button><br/>    
    <button class="btn" @click="btnAdd()">新增data中的值</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
    el:"#app2",
    data:{
        items:[
            {message:"Test1",id:"1"},
            {message:"Test2",id:"2"},
            {message:"Test3",id:"3"}
        ]
    },
    methods:{
       btnChange(){
            Vue.set(this.items,0,{message:"Change Test",id:'10'})
            // this.$set(this.items,0,{message:"Change Test",id:'10'})
        },
        btnAdd(){
            const itemLen=this.items.length;
            Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
            //this.$set(this.items,itemLen,{message:"Test add attr",id:itemLen});
        }
    }
});
</script>
</body>
</html>

vue.filter

自定义过滤器(filter)，可被用于一些常见的文本格式化
Vue实现过滤器（filter）及应用场景

我在人间贩卖青春

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js之Vue.set与Vue.filter

vue.set官方解释：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)如果在实例创建之后添加新的属性到实例上，它不会触发视图更新由于 JavaScript 的限制，Vue 不能检测出数据的改变，所以当我们需要动态改变数据的时候，Vue.set()完全可以满足我们的需求
复制链接

扫一扫