一、v-if
<div id="app"> <p v-if="isTrue">Hello</p> </div> <script> new Vue({ el:'#app', data:{ isTrue:false } }) </script>
二、v-show
<!-- 根据表达式的值显示或隐藏HTML元素 --> <div id="app"> <p v-show="isTrue">Hello</p> </div> <script> new Vue({ el:'#app', data:{ isTrue:false } }) </script>
三、v-else
<!-- else的意思 必须跟v-if或v-show一起使用 --> <div id="app"> <p v-if="ok">我是对的</p> <p v-else>我是错的</p> </div> <script> new Vue({ el:'#app', data:{ ok:true } }) </script>
四、v-model
v-model 指令用来在input select text checkbox radio 等表单控件上创建双向绑定的
根据控件类型v-model 自动选取正确的方法更新元素
姓名:
<input type="text" v-model="mydata.name"><br> 性别: <input type="radio" id="man" v-model="mydata.sex"> <label for="man">男</label> <input type="radio" id="male" v-model="mydata.sex"> <label for="male">女</label> <script> new Vue({ el:'#app', data:{ mydata:{ name:"", sex:"", interest:[], identity:'' } } }) </script>
五、v-for
<div id="app"> <ul> <li v-for="item in items">{{item.id}}{{item.name}}</li> </ul> </div> <script> new Vue({ el:'#app', data:{ items:[{ id:'1', 'name':'张三' }] } }) </script>
六、v-text
v-text 指令更新元素的textContent
<div id="app"> <span>{{msg}}</span> <!-- v-model数据双向绑定 --> <input type="text" v-model="msg"> </div> <script> new Vue({ el:'#app', data:{ msg:'zs' } }) </script>
七、v-html
<div id="app"> <div v-html="html"></div> </div> <script> new Vue({ el:'#app', data:{ html:'<h1>Vue</h1>' } }) </script>
八、v-bind
<div id="app"> <div :class="classA">红色</div> <div :class="classG">绿色</div> </div> <script> new Vue({ el:'#app', data:{ classA:'A', classG:'G' } }) </script>
九、v-on
<div id="app"> <button v-on:click="A">点击我</button> </div> <script> new Vue({ el:'#app', data:{}, methods:{ A:function(){ alert(1); } } }) </script>