1. v-bind绑定Class与Style
a. 绑定Class
语法:v-bind:class="{classname:boolParam} | object"
其中,classname为类名,boolParam为data中声明的bool变量,object为类对象。
也可将class绑定到数组,数组内可为class变量名或带bool的class。以下例子渲染结果均为<div class="active"></div>。
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:class="classObject"></div>
<div v-bind:class="computedClass"></div>
<div v-bind:class="[activeClass, {'text-danger':hasError}]"></div>
var app = new Vue({
el:'#app',
data:{
isActive: true,
hasError: false,
error: null,
classObject: {
active: true,
'text-danger': false
},
activeClass: 'active',
},
computed: {
computedClass: function() {
return {
active: this.isActive && !this.hasError,
'text-danger': this.hasError && this.error
}
}
}
})
b. 绑定style
语法:v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' } | object"
其中,activeColor和fontSize为在data内声明的变量,object为style对象,绑定style的用法与class类似。
2. v-if 条件渲染
语法: v-if=boolParam | JS表达式
相关指令: v-else-if 、v-else
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染,除非为元素添加唯一标识属性"key"。
如下例中,切换username时,input框会重新渲染,label不会。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
对比v-show:
带有 v-show
的元素始终会被渲染并保留在 DOM 中,v-show
只是简单地切换元素的 CSS 属性 display
。v-show
不支持 <template>
元素,也不支持 v-else
。
3. v-for 列表渲染
语法:v-for="item in/of items"
items为data中声明的数组或对象,item为每项的别名。为了提升v-for的复用效率,也应为每项元素绑定"key"。用例如下。
<ul id="example-2">
<!--遍历数组,index为索引,可只写item-->
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
<br/>
<!--遍历对象,key为键名,可只写value,添加了绑定的key属性-->
<li v-for="(value, key, index) in person" :key="index">
{{ index }}. {{ key }}: {{ value }}
</li>
</ul>
var app = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
person: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
数组更新检测:
a) 使用Vue提供的变异方法会改变原始数组,如push()、pop()等。
b) 使用非变异方法会得到一个新数组,如filter()、concat()、slice()等。
c) 以上两项会触发视图更新,但直接利用索引设置一个项的值或修改数组长度时,不会触发。需要用Vue.set()、vm.items.splice()等方法代替。
显示过滤/排序结果:
可以通过computed属性或methods,返回需要的结果数组。
备注:
a) 当 v-for 和 v-if 处于同一节点时, v-for的优先级比 v-if 更高,即v-if会在每个循环中运行。若要先执行v-if,则可将其置于v-for的父元素或<template>上。
b) 2.2.0+的vue版本里,在组件中使用v-for时,key是必须的。
4. v-on 监听事件
语法: v-on:eventName="methodsName"
其中eventName为事件名,methodsName为实例中声明的方法。v-on:可缩写为@,使用如下。
<div id="app">
<button v-on:click="greet">Greet</button>
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
</div>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
},
say: function (message) {
alert(message)
}
}
})
修饰符:
a. 事件修饰符:.stop、.prevent、.self等,可串联添加在事件后,如@click.stop等,可处理DOM事件细节。
b. 按键修饰符:按键别名如.enter、.tab等,可用@keyup.enter=""监听回车按键事件。