条件渲染v-if、v-else-if、v-else
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
type:'A'
}
})
</script>
</html>
运行结果
vue用key管理可复用的元素
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="input">
</template>
<button v-on:click="toggleLoginType()">Toggle login type</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
loginType: 'username'
},
methods: {
toggleLoginType: function() {
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
})
</script>
</html>
运行结果
条件渲染v-show
根据表达式之真假值，切换元素的 display CSS 属性。意思是该元素还在，只是不可见(display: none;)
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1>
<h1 v-show="ok===false">false!</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
</html>
运行结果
列表渲染v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 用 v-for 把一个数组对应为一组元素 -->
<ul id="example-1">
<li v-for="item in items" :key="item.id">
{{ item.message }}
</li>
</ul>
<hr >
<!-- 在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。 -->
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<hr >
<!-- 你也可以用 v-for 来遍历一个对象的属性。 -->
<ul id="v-for-object">
<li v-for="value in object">
{{ value }}
</li>
<hr >
<!-- 你也可以提供第二个的参数为 property 名称 (也就是键名) -->
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
<hr >
<!-- 还可以用第三个参数作为索引 -->
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
</ul>
</body>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [{
message: 'Foo'
},
{
message: 'Bar'
}
]
}
})
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [{
message: 'Foo'
},
{
message: 'Bar'
}
]
}
})
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
</html>
运行结果
v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
v-for里使用值范围
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="n in 10">{{ n }} </span>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
</html>
运行结果
v-for和v-if结合使用
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代码将只渲染未完成的 todo。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
完整示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="todo in todos" v-if="todo!==2">{{ todo }}</li>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [1, 2, 3]
}
})
</script>
</html>
运行结果
计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
所以，对于任何复杂逻辑，你都应当使用计算属性。
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vm">
<li v-for="n in evenNumbers">{{ n }}</li>
</div>
<div id="app">
<li v-for="n in even(numbers)">{{ n }}</li>
</div>
</body>
<script>
var vm = new Vue({
el: '#vm',
data: {
numbers: [1, 2, 3, 4, 5]
},
computed: {
evenNumbers: function() {
return this.numbers.filter(function(number) {
return number % 2 === 0
})
}
}
})
var app = new Vue({
el: '#app',
data: {
numbers: [1, 2, 3, 4, 5]
},
methods: {
even: function(numbers) {
return numbers.filter(function(number) {
return number % 2 !== 0
})
}
}
})
</script>
</html>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
v-on
绑定事件监听器。 示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p> {{ counter }} </p>
</div>
</body>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
</script>
</html>
运行结果
v-model
在表单控件或者组件上创建双向绑定。
双向绑定文本输入框
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<label>文本</label>
<br>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<label>多行文本</label>
<br>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ msg }}</p>
<br>
<textarea v-model="msg" placeholder="add multiple lines"></textarea>
</div>
</body>
<script>
var vm=new Vue({
el: '#example',
data:{
message:'',
msg:''
}
})
</script>
</html>
运行结果
双向绑定单选框和复选框
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
单个复选框，绑定到布尔值：
<br>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>
多个复选框，绑定到同一个数组：
<br>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#example',
data: {
checked: '',
checkedNames: []
}
})
</script>
</html>
运行结果
绑定单选按钮
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
</body>
<script>
new Vue({
el: '#example',
data: {
picked: ''
}
})
</script>
</html>
运行结果
绑定选择框单选
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script>
new Vue({
el: '#example',
data: {
selected: ''
}
})
</script>
</html>
运行结果
绑定选择框多选
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script>
new Vue({
el: '#example',
data: {
selected: []
}
})
</script>
</html>
运行结果
选择框用v-for渲染的动态选项
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script>
new Vue({
el: '#example',
data: {
selected: 'A',
options: [{
text: 'One',
value: 'A'
},
{
text: 'Two',
value: 'B'
},
{
text: 'Three',
value: 'C'
}
]
}
})
</script>
</html>
运行结果
v-model修饰符
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<!-- 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步： -->
在默认情况下
<input v-model="msg">
{{msg}}
<br>.lazy
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg2">
{{msg2}}
<br>指定输入类型为number
<!-- 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： -->
<!-- 键盘除了数字键其它键是不起作用的 -->
<input v-model="age" type="number">
<br>.number
<input v-model.number="age2" type="number">
<br>.trim
<!-- 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： -->
<input v-model.trim="msg3">
</div>
</body>
<script>
var vm = new Vue({
el: '#example',
data: {
msg: '',
age:'',
age2:'',
msg2:'',
msg3:''
}
})
</script>
</html>
运行结果
