版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tianmaxingkong_/article/details/78997858
1. v-once 只绑定一次
<div id="app_1"> <p>{{text}}</p> <p v-once>{{text}}</p> <input v-model="text"> </div>
var app = new Vue({ el: "#app_1", data: { text: 'Hello Vue!' } })使用v-model可以双向绑定节点和数值,如果只需要绑定一次,则可以使用v-once, 老版本的Vue中使用 {{*text}}, 新版本中不兼容这种方式。
2. 条件指令 v-if 和 v-show
当需要动态绑定节点是否显示,可以使用v-if或v-show
2-1 v-if
<div id="app_2"> <p v-if="show">Hello React!</p> <p v-if="!show">Hello Vue!</p> </div><br/>
var app_2 = new Vue({ el: '#app_2', data: { show: false } })
运行效果:
<div id="app_3"> <p v-show="show">Hello Android!</p> <p v-show="!show">Hello IOS!</p> </div><br/>
var app_3 = new Vue({ el: '#app_3', data : { show: false } })[v-if和v-show的区别]
v-show不支持<template>语法,v-if支持;
v-if是惰性的,在初始渲染时条件为假,则不去绘制,条件首次为真时采取开始局部编译并缓存编译结果,v-show在初始化渲染时会将所有节点都进行渲染,然后在添加为假的节点的CSS属性中加入display=none来隐藏该节点;
一般情况下,v-if的切换(移除和添加)消耗比较大,v-show的初始化渲染消耗更大; 若需要频繁切换,则使用v-show, 若节点在首次渲染完成之后不太可能发生切换,则使用v-if。
3. v-model在表单节点上创建数据双向绑定
<div id="app"> <p> {{person.name}} <input v-model="person.name"> </p> <p> {{person.sex}} <input type="radio" v-model="person.sex" value="Male" id="male"><label for="male">男</label> <input type="radio" v-model="person.sex" value="Female" id="female"><label for="female">女</label> </p> <p> {{person.interest}}<br/> <input type="checkbox" v-model="person.interest" value="Swim" id="swim"><label for="swim">游泳</label> <input type="checkbox" v-model="person.interest" value="Football" id="football"><label for="football">足球</label> <input type="checkbox" v-model="person.interest" value="Baskgetball" id="basketball"><label for="basketball">篮球</label> <input type="checkbox" v-model="person.interest" value="ReadBook" id="readBook"><label for="readBook">读书</label> </p> <p> {{person.identity}} <select v-model="person.identity"> <option value="Student">学生</option> <option value="Teacher">教师</option> <option value="Doctor">医生</option> </select> </p> </div>
<script type="text/javascript"> var app = new Vue({ el: '#app', data: { person: { name: '输入姓名', sex: 'Male', interest: ['Football'], identity: 'Teacher' } } }) </script>
4. 循环指令 v-for
<div id="app"> <ul> <li v-for="item in items" :class="item.className">{{item.name}}</li> </ul> </div>上面使用Vue动态制定了li节点的class。
<script type="text/javascript"> var app = new Vue({ el: '#app', data: { items: [ { name: '北京', className: 'Beijing' }, { name: '上海', className: 'Shanghai' }, { name: '广州', className: 'Guangzhou' } ] } }) </script>对应的CSS属性:
<style type="text/css"> .Beijing{color:dodgerblue} .Shanghai{color:orangered} .Guangzhou{color:limegreen} </style>
上面的代码展示了v-for绑定数组元素,v-for还可以循环展示Object:
<div id="app"> <ul> <li v-for="(item, key) in itemValues">{{key}} - {{item.college}} : {{item.name}}</li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { itemValues: { Wuhan: { name: "武汉", college: "华中科技大学" }, Hangzhou: { name: "杭州", college: "浙江大学" }, Sichuan: { name: "四川", college: "四川大学" } } } }) </script>
v-for还有一种渲染方法:
<div id="app"> <ul> <li v-for="i in 3">{{i}}</li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: {} }) </script>
5. v-text 和 v-html绑定数据
<div id="app"> <p v-text="textContent"></p> <!-- Same as --> <p>{{textContent}}</p> <input v-model="textContent"> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { textContent: 'Hello Vue!' } }) </script>
若果需要绑定的文本内容是一段html代码,需要使用v-html进行绑定:
<div id="app"> <p v-html="htmlContent"></p> <input v-model="htmlContent"> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { htmlContent: "<span style='color: red'></span>" } }) </script>