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>