vue--创建对象属性

1. 如果我们遇到以下情况
   当我们在页面中想完成一个动态效果，例如通过鼠标点击控制class的隐藏或者显示，然而我们的代码或者引用的数据中没有这个属性，这个时候我们可以通过vue中的set方法创建属性，并且为其赋值。

2.例如以下代码
以下并不是完整代码，由于完整代码有点多，所以仅截取相关代码
HTML+Vue

<div class="cart-item-check">
<!--我们没有在标签中创建名为check的class-->
<!--在json数据中我们也没有创建check属性-->
<!--但是我们在v-bind方法中绑定了check-->
   <a href="javascript:void 0" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectProduct(item)">
     <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
   </a>
</div>

json数据

  {
    "status":1,
    "result":{
      "totalMoney":109,
      "list":[
        {
          "productId":"600100002115",
          "productName":"黄鹤楼香烟",
          "productPrice":19,
          "productQuantity":1,
          "productImage":"static/img/goods-1.jpg",
          "parts":[
            {
              "partsId":"10001",
              "partsName":"打火机",
              "imgSrc":"static/img/part-1.jpg"
            },
            {
              "partsId":"10002",
              "partsName":"打火机",
              "imgSrc":"static/img/part-1.jpg"
            }
          ]
        }，
  "message":""
}

js

methods: {
//创建selectProduct函数给onclick事件引用
      selectProduct:function (item) {
      //如果check class的checked是否存在
          if(typeof item.checked=='undefined'){
          //全局创建
              Vue.set(item,'checked',true);
              //局部创建
              // this.$set(item,'checked','true');
          } else{
              item.checked=!item.checked;
          }
      }

3.总结

• 现用v-bind绑定自己想要的class名称

• 在js中用Vue.set 或者this.$set创建class