Vue实现商品筛选

记得之前用原生js实现过这个案例，今天又用vue实现了一下，感觉还是vue实现起来要简单一点

直接看代码：注释上面有解释（后面有些知识点，代码后面会聊，如果会了，就可以不看哦）

    
    
    
    
    



    

        

            你的选择:
            
             
                 {{item}}
                 x
             
        
        

            

                {{item.title}}：
                
                    {{value}}
                
            
        

    

知识点补充：

为Vue中的对象动态添加属性的方法：根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

如果我们想要为choose添加一个新的属性name，像vm.choose.name = "leo";这种写法是不能够更新视图的

在上面的小例子中我们想要为choose对象添加属性，我们采用的方法是$.set()的方法，那下面我们就聊聊为对象动态添加属性的三种方法。

1、Vue.set(target,prop,value)；//调用vue的静态方法

• 设置对象的属性，如果对象是响应的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开Vue不能检测属性被添加的限制

2、vm.$set(target,prop,value);//调用实例上的方法$set

3、vm.choose = Object.assign({},vm.choose,{name:"donna"});//替换对象。

使用这种方法需要注意,第一个空对象是不能够少的，因为Object.assign中的第一个对象就是它的返回值，如果我们设置第一个对象为vm.choose,那么其实就相当于直接给choose对象添加属性，这样视图是不会更新的。

var o = Object.assign(vm.choose,{name:"donna"});
console.log(vm.choose=== o);//true

o这个返回值就是vm.choose这个对象