vue条件渲染列表渲染原理示例详解
更新时间：2023年07月21日 10:19:46 作者：小白兔zqd
这篇文章主要为大家介绍了vue条件渲染列表渲染原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
Vue.js（读音 /vju?/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。
1、v-if
v-if 是根据表达式的值决定在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。
<body>
<div id="example">
<p v-if="yes">我可以被看到</p>
<p v-if="no">我不能被看到</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#example",
data:{
yes:true,
no:false
}
})
</script><p v-if="no">我不能被看到</p>不会再DOM树中显示出来。
因为v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把<template>元素当作包装元素，并在其上使用v-if，最终的渲染结果不会包含<template>元素。
<body>
<div id="example">
<template v-if="yes">
<h1>我是标题H1，我可以被看到</h1>
<p>我是段落p，我可以被看到</p>
<div>我是div，我可以被看到</div>
</template>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#example",
data:{
yes:true,
no:false,
}
})
</script>2、v-show
另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样：
<body>
<div id="example">
<p v-show="yes">我可以被看到</p>
<p v-show="no">我不能被看到</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#example",
data:{
yes:true,
no:false
}
})
</script>不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。<p display="none">我不能被看到</p>v-show只是切换元素的 CSS 属性 display 。
3、v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
<body>
<ul id="example">
<li v-for="(item,index) in items">
{{index+1}}:{{item.message}}
</li>
</ul>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:"#example",
data:{
items:[
{message:"xiaoming"},
{message:"xiaohong"},
{message:"xiaohei"}
]
}
})
</script>以上就是vue条件渲染列表渲染原理示例详解的详细内容，更多关于vue条件渲染列表渲染的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue3中实现音频播放器APlayer的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
vue中swiper开启loop后,点击事件不响应的解决方案
这篇文章主要介绍了vue中swiper开启loop后,点击事件不响应的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了antd design table更改某行数据的样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue如何重置data的所有属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天小编就为大家分享一篇在vue项目中正确使用iconfont的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
本篇文章主要介绍了Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vite+vue3中如何使用router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了通过vue-cli3构建一个SSR应用程序,以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。2018-09-09
这篇文章主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要给大家介绍了关于vue3中组件事件和defineEmits的相关资料,组件事件是Vue组件之间进行通信的一种方式,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-10-10
最新评论