共计 949 个字符，预计需要花费 3 分钟才能阅读完成。
1. 简单的 v -if v-else 使用
<div id="app">
<!-- 1.if else 简单使用 -->
<p v-if="show">true 的时候显示 </p>
<p v-else>else 的时候显示 </p>
<button v-on:click="show=!show"> 切换状态 </button>
</div><script>
new Vue({
el:'#app',
data:{show:true,}
})
</script>解析：通过 show 来控制不同标签的显示，不存在的标签不是隐藏了而是删除了，这跟 v -show 不同。
2.v-for 简单使用
<ul>
<li v-for="(person,index) in persons">name is {{person.name}}, age is {{person.age}}</li>
</ul>data:{
persons:[{name:'csz',age:20},
{name:'lc',age:18},
]
}解析：循环列表时，参数 1 为内容，参数 2 为 index，循环对象时，参数 1 为 value，参数 2 为 key
3.v-for 列表数据的修改
<body>
<div id="app">
<!-- 1.if else 简单使用 -->
<!-- <p v-if="show">true 的时候显示 </p>
<p v-else>else 的时候显示 </p>
<button v-on:click="show=!show"> 切换状态 </button> -->
<!-- 2. 列表渲染 -->
<ul>
<li v-for="(person,index) in persons">
<p v-for="(value,key) in person">key is {{key}}, value is {{value}}</p>
</li>
</ul>
<button @click='persons.push({name:"111",age:"40"})'> 增加一个 </button>
<button @click='persons.pop()'> 删除最后一个 </button>
</div>
</body><script>
new Vue({
el:'#app',
data:{
persons:[{name:'csz',age:20},
{name:'lc',age:18},
]
}
})
</script>
正文完
发表至： javascript
2019-06-10
