v-model实现双向绑定、v-show、v-if、v-else-if、v-for的使用

1.v-model 的用法

 vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。

<p> 用户名是: {{username}} </p>
<input type="text" v-model="username" />

<p> 选中的省份是: {{province}}</p>
<select v-model="province">
    <option value=""> 请选择</option>
    <option value="1">北京 </option>
    <option value="2">河北</option>
    <option value="3"> 黑龙江</option>
</select>

当数据源里的username的值改变，v-model 和 v-bind 绑定的元素的值都会发生改变，但是如果改变 v-bind 绑定的元素里的值，数据源里的username的值不会发生改变，而v-model 会。

2.v-model可以绑定的元素 

1. input输入框(type属性值为：radio、checkbox、xxxx)
2. textarea
3. select

3.v-model指令的修饰符

 为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符,分别是:

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number= "age" />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim= "msg" />
.lazy	在"change"时而非"input" 时更新	<input v-model.lazy= "msg" />

 4.条件渲染指令

 条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是:

• v-if
• v-show

示例用法：

<div id="app">
    <p v-if="networkState === 200">请求成功--- 被v-if 控制</p>
    <p v-show="networkState === 200">请求成功 --- 被v-show控制</p>
</div>

 

 当flag为false时，全部隐藏，但是方式不一样，如下：

4.1 v-show 

 v-show的原理是:动态为元素添加或移除display: none 样式，来实现元素的显示和隐藏

•  如果要频繁的切换元素的显示状态，用v-show性能会更好

 v-if的原理是:每次动态创建或移除元素，实现元素的显示和隐藏

• 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来,此时 v-if 性能更好

3.在实际开发中，绝大多数情况，不用考虑性能问题，直接使用v-if就好了! !

v-if 配套的指令

 1.v-else指令

<div v-if="Math.random() > 0.5">
    随机数大于0.5
</div>
<div v-else>
    随机数小于或等于0.5
</div>

注意: v-else 指令必须配合v-if指令一起使用，否则它将不会被识别!

2. v-else-if

v-else-if 指令，顾名思义，充当v-if的"else-if 块”，可以连续使用:

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>

注意: v-else-if 指令必须配合v-if指令一起使用， 否则它将不会被识别!

列表渲染指令

1.v-for

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。 v-for指令需要使用item in items形式的特殊语法，其中:

•  items是待循环的数组
• item是被循环的每一项

 

 v-for指令还支持一个可选的第二个参数,即当前项的索引。语法格式为(item, index) in items,示例代码如下:

 

 注意: v-for指令中的item项和index索引都是形参，可以根据需要进行重命名。例如(user, i) in userlist

 key的注意事项

1. key 的值只能是字符串或数字类型
2.  key 的值必须具有唯一性(即: key 的值不能重复)
3. 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性 )
4. 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
5. 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)