条件渲染
v-if
1.写法
（1）.v-if="表达式"
（2）v-else-if="表达式"
（3）v-else=“表达式”
注：v-if可和v-else-if、v-else一起使用，但必须连用结构不能被打断 2.使用场景： 切换频率较低的场景 3.特点：不展示的DOM元素直接被删除
4.搭配 template使用
<!-- 模板编译 -->
<!-- 三个p的同时出现,不包含外部元素可以用template,页面不渲染该元素,只能与v-if 搭配使用 -->
<template v-if="1 === 1">
<p>Angular</p>
<p>React</p>
<p>Vue</p>
</template>v-show
1.写法：v-show=“表达式” 2.用于切换频率较高的场所 3.特点：不展示的DOM元素未被移除，样式display:none 使用v-if时元素可能无法获取到，v-show元素一定可以获取到
v-if与v-show案例
<body>
<!--
条件渲染：
1.v-if
写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除.
注意：v-if可以和:v-else-if、v-else一起使用,但要求结构不能被打断
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景.
特点：不展示的Dom元素未被移除,仅仅是使用样式隐藏掉
3.备注：使用v-if的时候,元素可能无法获取到,而使用v-show一定可以获取到.
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点我n+1</button><br>
<button @click="n--">点我n-1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="true">欢迎来到{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="true">欢迎来到{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
<!-- <div v-show="n === 1">Angular</div>
<div v-show="n === 2">React</div>
<div v-show="n === 3">Vue</div> -->
<!-- <div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div> -->
<!-- 模板编译 -->
<!-- 三个p的同时出现,不包含外部元素可以用template,页面不渲染该元素,只能与v-if 搭配使用 -->
<template v-if="1 === 1">
<p>Angular</p>
<p>React</p>
<p>Vue</p>
</template>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
name:'尚硅谷',
n:0,
}
})
</script>
</body>基本渲染
v-for指令
1.用于展示列表数据
2.语法： v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串(用的很少)、 指定次数(用的很少)
<body>
<div id="root">
<!--
v-for指令
1.用于展示列表数据
2.语法： v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串(用的很少)、 指定次数(用的很少)
-->
<h2>人员列表(遍历数组)</h2>
<ul>
<!-- <li>xxx-xxx</li>
<li>xxx-xxx</li>
<li>xxx-xxx</li> -->
<li v-for="p in persons">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 如果是对象,那么k就是属性名,value是属性值 -->
<h2>汽车信息(遍历对象)</h2>
<ul>
<li v-for="(value,k) of car">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串,这里的a是字符,b是字符的索引 -->
<h2>测试遍历字符串</h2>
<ul>
<li v-for="(a,b) in str">
{{a}}-{{b}}
</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;
const vm = new Vue({
el: "#root",
data: {
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20},
],
car:{
name:'奥迪A8',
price:'70W',
color:'黑色'
},
str:'hello'
}
})
</script>
</body>key的原理
虚拟DOM中key的作用（key存在于虚拟DOM不会在真实DOM中）
key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，
随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较
对比规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key
①若虚拟DOM中内容没有变化，直接使用之前的真实DOM
②若虚拟DOM中内容变了，则生成的新的DOM随后替换掉之前页面的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM随后渲染到页面
用index作为key可能会引发的问题
（1）若对数据进行逆序操作（破坏顺序）且结构中不包含输入类（input框等）的DOM，
则会产生没有必要的真实DOM更新，界面效果一般不会有问题但是效率较低
（2）如果结构中包含输入类的DOM，会产生错误DOM更新，界面有问题
开发中如何选择key
(1)最好选择每条数据的唯一标识作为key,如ID、学号等
(2)如果不存在对数据的逆序操作，仅适用于渲染列表展示，适用index做为key是没有问题的
案例（点击按钮在原来数组中的第一个位置添加老刘）
<body>
<div id="root">
<!--
1.虚拟DOM中key的作用（key存在于虚拟DOM不会在真实DOM中）
key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，
随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较
2.对比规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key
①若虚拟DOM中内容没有变化，直接使用之前的真实DOM
②若虚拟DOM中内容变了，则生成的新的DOM随后替换掉之前页面的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM随后渲染到页面
3.用index作为key可能会引发的问题
（1）若对数据进行逆序操作（破坏顺序）且结构中不包含输入类（input框等）的DOM，
则会产生没有必要的真实DOM更新，界面效果一般不会有问题但是效率较低
（2）如果结构中包含输入类的DOM，会产生错误DOM更新，界面有问题
4.开发中如何选择key
(1)最好选择每条数据的唯一标识作为key,如ID、学号等
(2)如果不存在对数据的逆序操作，仅适用于渲染列表展示，适用index做为key是没有问题的
案例（点击按钮在原来数组中的第一个位置添加老刘）
-->
<h2>人员列表(遍历数组)</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<!-- <li v-for="(p,index) of persons" :key="p.id">-->
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}
<input type="text">
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20},
]
},
methods: {
add(){
const p = {id:'004',name:'老刘',age:40}
this.persons.unshift(p)
}
}
})
</script>
</body>
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
