这篇文章给大家介绍的文章内容是关于vue中条件渲染的分析（附代码），有很好的参考价值，希望可以帮助到有需要的朋友。
条件指令
所谓条件指令是指满足某个条件时执行哪部分代码，不满足条件时执行哪部分条件代码。vue条件指令有v-if，v-else-if，v-else三个，v-if条件渲染用来指示元素是否移除或者插入，根据表达式的值的真假条件渲染元素。
v-if示例
方式一使用v-if显示标签，当初始化值为true时，则显示第一个标签，当初始化值为false时，则显示第二个标签：
{{title}}
ishow为true我将首次展现ishow为false我将首次展现export default { name: 'v-if', data () { return { title: '条件渲染', isshow: true } } } .title1 { text-align: left; } .div1{ float: left; }
v-else-if
使用条件：v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后，当项目中有多个判断条件时使用。
使用方式一：使用字符串显示标签，当判断条件初始化值为字符串1时，则显示if标签，当判断条件初始化值不为字符串1时，则根据判断条件显示v-else-if条件标签，示例如下：
export default { name: 'v-if', data () { return { title: '条件渲染', isshow: '2' } } } .title1 { text-align: left; } .div1{ float: left; }{{title}}
ishow为字符串类型1我将首次展现 (elseif)否则ishow为字符串类型2我将首次展现 (elseif)否则ishow为字符串类型3我将首次展现登录后复制
立即学习“前端免费学习笔记（深入）”；
使用方式二：使用数字类型显示标签，当判断条件初始化值为数字类型1时，则显示if标签，当判断条件初始化值不为数字类型1时，则根据判断条件显示v-else-if条件标签，示例如下：
export default { name: 'v-if', data () { return { title: '条件渲染', isshow: 3 } } } .title1 { text-align: left; } .div1{ float: left; }{{title}}
ishow为数字类型1我将首次展现 (elseif)否则ishow为数字类型2我将首次展现 (elseif)否则ishow为数字类型3我将首次展现登录后复制
v-else示例
使用条件：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
使用方式一：if-else类型，使用初始化bool值显示标签：
export default { name: 'v-if', data () { return { title: '条件渲染', isshow: false } } } .title1 { text-align: left; } .div1{ float: left; }{{title}}
ishow为true我将首次展现 ishow为false我将首次展现登录后复制
使用方式二：if-else类型，用字符串显示标签，当初始化值为字符串1时，显示if标签，当初始化值不为字符串1的时候，显示else标签，示例如下：
export default { name: 'v-if', data () { return { title: '条件渲染', isshow: '1' } } } .title1 { text-align: left; } .div1{ float: left; }{{title}}
ishow为字符串1我将首次展现 ishow不为字符串1我将首次展现登录后复制
使用方式三：if-else类型，用数字类型显示标签，当初始化值为数字类型1时，显示if标签，当初始化值不为数字类型1的时候，显示else标签，示例如下：
export default { name: 'v-if', data () { return { title: '条件渲染', isshow: '1' } } } .title1 { text-align: left; } .div1{ float: left; }{{title}}
ishow为数字类型1我将首次展现 ishow不为数字类型1我将首次展现登录后复制
使用方式四：if-elseif-else类型，当if和elseif条件都不满足时，显示else标签，示例如下：
export default { name: 'v-if', data () { return { title: '条件渲染', isshow: 3 } } } .title1 { text-align: left; } .div1{ float: left; }{{title}}
ishow为数字类型1我将首次展现 (elseif)否则ishow为数字类型2我将首次展现 if-elseif条件都不满足，我将首次展现登录后复制
总结：复杂的程序都是由简单的判断条件组合变化而成，在程序中灵活使用判断条件才是最重要的。
相关推荐：
Vue中v-model指令的分析（附代码）以上就是Vue中条件渲染的分析（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2745104.html
赞 (0)
