标签:Vue name 渲染 show 遍历 条件 island2 island1 id
条件渲染
v-show
实质上是display:none,适用于切换频繁的场景
v-show可以拿到dom, v-if不一定
v-if
实质上是dom的增删,适用于切换不频繁的场景
写法:
v-if
v-else-if
v-else
template
template只能和v-if一起使用,不能和v-show一起使用
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../lib/vue.js"></script>
<body>
<div id="root">
<ul>
<h1>遍历数组</h1>
<li v-for="(p,index) in persons" :key="p.id">
<span>{{p.name}}-{{p.id}}</span>
</li>
<h1>遍历对象</h1>
<li v-for="(value,key) of personObj" :key="key" >
<span>{{value.name}} - {{value.id}}</span>
</li>
<h1>遍历字符串</h1>
<li v-for="(value,index) in personStr" >
<span>{{value}} - {{index}}</span>
</li>
<h1>遍历指定次数</h1>
<li v-for="index of 5" >
<span>{{index}}</span>
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
persons: [
{ name: 'island1', id: 1 },
{ name: 'island2', id: 2 },
{ name: 'island3', id: 3 }
],
personObj:{
island1: { name: 'island1', id: 1 },
island2: { name: 'island2', id: 2 },
island3: { name: 'island3', id: 3 }
},
personStr:'island1'
}
})
</script>
</body>
</html>
标签:Vue,name,渲染,show,遍历,条件,island2,island1,id 来源: https://www.cnblogs.com/ltfxy/p/15858924.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。