条件判断遍历循环v-model

v-if v-else

用户输入类型切换小案例中，如果有输入内容，发现切换仍保留之前内容。
因为vue在进行dom渲染时，出于性能考虑，会尽可能复用已经存在的元素，而不会创建新的元素。如果不希望进行复用，，则给对应的元素加上key属性，且key的值要不同。

v-show和v-if的区别

当v-if条件为false时，会删除对应的dom元素（不停的删除创建）
而v-show条件为false时，仅仅是修改元素样式为 display：none

开发中：
如果需要在显示与隐藏之间切片很频繁，则使用v-show
若只有一次切换，则使用v-if

v-for补充

遍历数组可以取（item，index）
遍历对象如果只获取一个值，则为value；v-for=“value in obj”
如果获取key和value 则是 v-for="(value,key) in obj"
如果获取value、key、index，则 v-for="(value,key,index) in obj"

官方在推荐我们使用v-for时，可以给对应的元素或组件添加一个：key属性，作用是为了高效的更新虚拟DOM。

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

注意：通过索引值修改数组中的元素不是响应式的
例如 this.letters[0] = ‘bbbb’,但是可以用Vue提供的set方法来实现，如Vue.set(this.letters,0,‘bbbb’)。set(修改对象，索引值，修改后的值)

push、pop、shift、unshift、splice、sort、reverse

书籍项目补充知识

1、toFixed方法
numberObject.toFixed(n) 可以把number四舍五入为指定小数位数的数字

2、vue实例的filters过滤器
双花括号插值用法

<td>{{item.price | showPrice}}</td>filters:{showPrice(price){return '￥'+ price.toFixed(2)}
}

v-model

可以实现数据的双向绑定，结合表单元素使用
v-model其实是一个语法糖，背后本质是包含两个操作：
1、v-bind：绑定value属性
2、v-on：给当前元素绑定input事件

<input type="text" v-model="message"><input type="text" :value="message" @input="message = $event.target.value"

v-model配合input表单radio使用
选中谁就会把value赋给sex，实现view改变model

<input type="radio" value="男" v-model="sex">
<input type="radio" value="女" v-model="sex">

v-model配合input表单checkbox使用
1、单个勾选框
v-model对应的是布尔值，为true表示选中，为false表示未选中

<input type="checkbox" v-model="isAgree">同意协议isAgree:true/false

2、多个勾选框
v-model对应的是一个数组，选中会将对应的value压入数组

<input type="checkbox" value="篮球" v-model="hobbies">
<input type="checkbox" value="足球" v-model="hobbies">
<input type="checkbox" value="羽毛球" v-model="hobbies">

v-model配合input表单select使用
1、单个选项
将v-model写在select中选中谁就会把value赋给myLove

<select v-model="myLove">
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="banana">banana</option>
</select>

2、多选
给select添加multiple属性，选中谁就会将该项的value值压进数组

v-model修饰符

1、number
默认情况下，输入框输入的内容都会被当成字符串处理，那么如果希望当作数字处理，可以用number修饰符修饰，会让输入框输入的内容自动转换成数字类型
2、lazy
默认情况view数据发生改变，data中的数据会立刻改变
lazy修饰符可以让数据在回车或者失去焦点才会更新
3、trim
如果输入内容首位有很多空格，会过滤掉