Vue2.0 使用经验

小白进阶过程：记录使用比较频繁并有用的方法

v-if 和 v-show

从使用的结果上看，两者并没有太大区别。

v-show只是隐藏了dom，在初始化时，会对dom绑定的变量进行操作，如果变量不存在或者有误，页面则不会正常的显示。

但是v-if是在触发了true条件后，才会进行dom创建操作，在初始化页面时，需要注意两者的区别。

区别点：v-if在频繁的显示和隐藏过程中比v-show消耗更多的性能，但是在初始化的过程中v-if比v-show更快捷

 

v-for

<div v-for="(key,yIndex) in examinTargets" class="flex-row flex-nowrap">
     <div class="baseHead">{{key.deptName}}/{{key.name}}</div>
     <div v-for="(column,xIndex) in examTable[examTableLength[examTableLength.length-1]]" :key="index" class="score">
        <input type="number" class="scoreInput" :userId="key.id" :itemId="column.itemId" :id="column.itemId+'_'+key.id"  
           required oninvalid="this.setCustomValidity('请输入评分')" oninput="setCustomValidity('')"  :name="key.id"
             @blur="fillScore(column,key,xIndex,yIndex)" :disabled="modalType=='secondEval'"></input>
      </div>
</div

在v-for的作用域中，key和yIndex可以在任何地方使用。在绑定属性时可以解析到对应的变量，同时可以通过单引号或者使用函数进行字符串拼接操作。当v-for和v-if同时使用时，v-for的优先级要高于v-if

 

Vue2.0 $set()方法

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的，即触发视图更新。

正确写法：this.$set(this.data,”key”,value’) 

或者在初始化对象时直接定义对应的属性，也可以实现响应式更新视图

如果是修改数组，那么第二个参数应为数据所在数组的索引