vue条件渲染指令是什么,vue怎么渲染HTML
本文主要介绍Vue条件渲染和列表渲染。条件渲染包括v-if、v-show等。文章详细介绍了条件渲染和列表渲染，有一定的参考价值，有需要的朋友可以参考一下。
目录
一、Vue条件渲染v-showv-ifv-else-ifv-elsev-if及模板汇总二。v-showkey在列表呈现1中的作用。虚拟DOM 2中键的作用。比较规则3。使用索引作为键4时可能出现的问题。开发中如何选择key？react和vue中key的作用是什么？(钥匙的内部原理)
一、Vue条件渲染
v-show
！-使用v-show的条件渲染-
h1 v-show=false{{name}}/h1
！-或者-
h1 v-show= 1===3“{ name } }/h1
举例1
div id=root
h2 n的当前值是{{n}}/h2
button @ Click= n Click me n 1/button
div v-show=n===12020/div
div v-show=n===22021/div
div-show= n===3 2022/div
/div
脚本类型=文本/javascript
Vue.config.productionTip=false
//创建一个vue实例
新Vue({
el: #root ，
数据：{
姓名：你好，
n: 0
}
})
/脚本
v-if
！-使用v-if的条件渲染-
h1 v-if=false{{name}}/h1
h1 v-if= 1===1“{ name } }/h1
如果开关频率高，则使用v-show，如果低，则使用。
v-else-if
举例2
div id=root
h2 n的当前值是{{n}}/h2
button @ Click= n Click me n 1/button
div v-if=n===12020/div
div v-else-if=n===12021/div
div v-else-if=n===32022/div
/div
你可以看到v-if，v-else-if的逻辑和if-else if的逻辑是一样的，满足以下要求的代码不会被执行。
v-else
div id=root
h2 n的当前值是{{n}}/h2
button @ Click= n Click me n 1/button
div v-if=n===12020/div
div v-else-if=n===12021/div
div v-else-if=n===22022/div
div v-否则某年/div
/div
v-if 与 template
div id=root
h2 n的当前值是{{n}}/h2
button @ Click= n Click me n 1/button
模板v-if=n===1
h22020/h2
h22021/h2
h22022/h2
/模板
/div
小结
条件渲染
1、v-if
写法：
(1).v-if= expression "
(2).v-else-if= expression
(3).v-else= expression
适用于：切换频率低的场景特点：不显示的DOM元素直接删除注意：V-if可以与v-else-if和v-else一起使用，但结构不能中断2、v-show
写法：V-show= expression 适用于：切换频率高的场景特点：不显示的DOM元素不删除，只使用样式隐藏3.备注：。
使用v-if，元素可能不可用，但可以使用v-show获得。
使用v-if，元素可能不可用，但可以使用v-show获得。
二、列表渲染
v-show
基本使用：
！声明文档类型
html lang=en
头
meta charset=UTF-8
TitleVue初次见面/title
脚本类型=text/javascript src=。/js/vue.js/script
/头
身体
div id=root
！-遍历数组-
H2人员列表(遍历数组)/h2
保险商实验所
李v-for=(p，index) in persons :key=index
{{p.name}} - {{p.age}}
/李
/ul
！-遍历对象-
H2猫信息(遍历对象)/h2
保险商实验所
li v-for=(值，k) in cat :key=k
{{k}}:{{value}}
/李
/ul
！-穿过绳子-
H2遍历字符串(较少使用)/h2
保险商实验所
li v-for=(char，index) in str :key=k
{{char}}-{{index}}
/李
/ul
！-遍历指定的次数-
H2遍历指定次数(较少使用)/h2
保险商实验所
li v-for=(index，number) in 5 :key=index
{{index}}-{{number}}
/李
/ul
/div
脚本类型=文本/javascript
Vue.config.productionTip=false
//创建一个vue实例
新Vue({
el: #root ，
数据：{
人员：[
{id:1，姓名：张三，年龄：18}，
{id:2，姓名：李四，年龄：19}，
{id:3，姓名：王武，年龄：20}，
],
猫：{
姓名：王大苗，
年龄：2，
颜色：“灰色”
},
str:你好
}
})
/脚本
/body
/html
v-for指令
1、用于显示列表数据2、语法：v-for=(item，index) in xxx :key=yyy3、遍历：数组、对象、字符串(很少使用)、指定次数(很少使用)
key的作用
如果以index为键，循环通过人，同时在后面添加输入，复制显示的信息，然后添加一个按钮，点击在列表前添加一个老刘。
div id=root
！-遍历数组-
H2人员列表(遍历数组)/h2
保险商实验所
李v-for=(p，index) in persons :key=index
{{p.name}} - {{p.age}}
输入类型=text/
/李
/ul
Button @click=add 添加一个老刘/button
/div
脚本类型=文本/javascript
Vue.config.productionTip=false
//创建一个vue实例
新Vue({
el: #root ，
数据：{
人员：[
{id:1，姓名：张三，年龄：18}，
{id:2，姓名：李四，年龄：19}，
{id:3，姓名：王武，年龄：20}，
]
},
方法：{
add(){
Const p={id:4，姓名：老刘，年龄：40}
this.persons.unshift(p)
}
}
})
/脚本
错乱原因：
当 id 做为 key
保险商实验所
li v-for=(p，index) in persons :key=p.id
{{p.name}} - {{p.age}}
输入类型=text/
/李
/ul
react、vue中的key有什么作用？（key的内部原理)
1、虚拟DOM中key的作用
Key是虚拟DOM对象的标识符。当数据发生变化时，Vue会根据新的数据生成一个新的虚拟DON，然后Vue会比较新的虚拟DOM和旧的虚拟DOM的差异。比较规则如下：
2、对比规则
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
如果虚拟DOM中的内容不直，则使用之前的真实DOM如果虚拟DOM中的内容发生变化，则生成新的真实DOM，然后替换页面中之前的真实DON(2).旧虚拟DOM中未找到与新虚拟DOM相同的 key：。
创建一个新的真实DOM，然后将其呈现到页面上。
3、用index作为key可能会引发的问题
(1).数据逆序添加、逆序删除等破坏性操作，会造成不必要的真实DOM更新(界面效果还好，但是效率低)。(2)如果结构中还包含输入类的DOM，会导致错误的DOM更新(接口有故障)。
4、开发中如何选择key?
(1).最好使用每条数据的唯一标识符作为键，比如id的唯一值、手机号、身份证号、学号等。(2).如果没有破坏性的操作，如以相反的顺序添加或删除数据，它仅用于呈现列表以供显示。用index做键没问题。关于Vue条件呈现和列表呈现的这篇文章已经在这里介绍过了。更多相关Vue渲染内容，请搜索我们之前的文章或者继续浏览下面。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。