Vue 基础（二）：条件渲染与列表渲染
条件渲染
v-if
写法：
v-if=”表达式”
v-else-if=”表达式”
v-else=”表达式”
示例：当n为1、2、3时，Angular、React、Vue会分别显示，为0和其他值时，显示的是哈哈。
<div id="root">
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
n:0
}
})
</script>
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”，既使用v-if、v-else-if、v-else的标签之间不能有其他标签。
v-show
写法：v-show=”表达式”
示例：只有n为1时信息才会显示
<div id="root">
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<h2 v-show="n === 1">欢迎来到北京</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
n:0
}
})
</script>
二者的区别：
v-if
特点：不展示的DOM元素直接被移除。
适用于：切换频率较低的场景。
v-show
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
适用于：切换频率较高的场景。
列表渲染
使用：
v-for指令:
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息（遍历对象）</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'三轮车',
price:'10000元',
color:'蓝色'
},
str:'hello'
}
})
</script>
key：
虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key：
创建新的真实DOM，随后渲染到到页面。
用index作为key可能会引发的问题：
若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM，会产生错误DOM更新 ==> 界面有问题。
开发中如何选择key:
最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
收集表单数据
则v-model收集的是value值，用户输入的就是value值。
2.配置了input的value属性:
v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的的就是value组成的数组
示例
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字，一般与type=”number”一起使用
trim：输入首尾空格过滤
上面代码中的其他信息 ，不会每次输入都会实时影响vm的值，只有textarea失焦后值才会从页面流向data
