1.5 v-show与v-if的区别

v-show与v-if的区别

• v-show相当于增加了元素样式 display:none,v-if决定元素是否创建

---

v-for遍历数组和对象

• 遍历数组即拿到元素又拿到元素索引值
• 格式：(元素，索引）in 数组

<div id="app">
	<ul>
		<li v-for="(v,i) in names">{{i+'-'+v}}</li>
	</ul>
</div>

• 在遍历对象时，如果获取到的是一个值，那么获取到的是value   格式：value  in object
• 如果同时获取value和key，那么(value,key) in object
• 还可以获取到字段索引值。(value,key,index) in object

---

v-for 绑定和非绑定key的区别

• 默认情况下Vue在数组中插入元素时，虚拟DOM的diff算法不会直接插入，而在是插入的位置进行替换，后续的元素依次相互替换。使用KEY给每个元素做唯一标识，diff算法就可以正确找到该节点，高效的更新虚拟DOM

---

数组中哪些方法是响应式的

• 通过下标修改数组元素，不能实时监听反馈渲染到页面，因此不是响应式的。this.array[0]='xxx' 不会实时反映到页面。 也只有简单型的数组受影响，对象数组及一般data变量不存在该问题。 可以通过splice或者Vue.set(this.names,0,'li')实现修改
• shift和pop  分别代表删除数组的第一个元素和删除数组最后一个元素
• unshif和push  分别代表在数组最前面和最后面加入元素
• 在函数中使用...items运算符，相当于把接收到的不确定个数的参数传递给items数组；...也叫展开运算符，在数据库中插入字段时，可以展开对象实现字段的自动插入。
• splice 可对数组进行增、删、改。数组.splice（开始下标，删除个数，删除位置上添加的元素)，参数3后面可以再添加参数，都代表是添加的元素，但不是必选项。
• reverse  实现数组元素倒置
• sort 对数组进行排序，可以传入函数.

---

计算属性添加参数的方法

 <p>{{ getNewIndex(data) }}</p>
    js:
    computed: {
      getNewIndex() {
        // data是使用的时候的参数
        retun (data) => {
            return data.index;
        }
      },
    }

---

过滤器

• 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“|”符号指示

<!-- 使用过滤器自动把|前的变量当作参数 -->
<td>{{book.price | filter_price}}</td>

filters:{
	filter_price(price){
		// toFixed保留两位小数
		return '$'+price.toFixed(2)
	}
}