双向数据绑定
双向数据绑定一般发生在input、select、textarea这些表单元素中，当接收到输入值后，其他地方可以直接实时的显示输出值。可以使用v-model指令实现双向绑定。
<body>
<div id="app">
<h1>双向数据绑定 / input / select / textarea</h1>
<label for="">姓名：</label>
<input type="text" v-model="name">
<p>{{ name }}</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: ''
}
})
</script>
这样，当在input中输入内容后，p标签中的name会实时显示。
计算属性computed
计算属性有缓存机制，更加优化。
而函数则每次调用都会执行。
<body>
<div id="app">
<h1>computed 计算属性</h1>
<button @click="a++">add to A</button>
<button @click="b++">add to B</button>
<p>A - {{ a }}</p>
<p>B - {{ b }}</p>
<p>Age + A = {{ addToA }}</p>
<p>Age + B = {{ addToB }}</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
// addToA() {
// return this.a + this.age
// },
// addToB() {
// return this.b + this.age
// }
},
computed: {
addToA() {
return this.a + this.age
},
addToB() {
return this.b + this.age
}
}
})
</script>
动态绑定CSS样式
Vue使用v-bind:class或者:class来动态绑定样式。
<body>
<div id="app">
<h1>动态CSS class</h1>
<h2></h2>示例1</h2>
<div @click="changeColor = !changeColor" :class="{changeColor: changeColor}">
<span>Henry</span>
</div>
<h2>示例2</h2>
<div :class="compClasses">
<span>Henry</span>
</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
changeColor: true,
changeLength: true
},
computed: {
compClasses() {
return {
changeColor: this.changeColor
}
}
}
})
</script>
条件渲染：v-if, v-show
<body>
<div id="app">
<h1>v-if指令</h1>
<button @click="error = !error">Toggle Error</button>
<button @click="success = !success">Toggle Success</button>
<p v-if="error" class="error">网络连接错误：404</p>
<p v-else-if="success" class="success">网络连接成功</p>
<p v-show="error" class="error">网络连接错误：404</p>
<p v-show="success" class="success">网络连接成功</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
error: false,
success: false
}
})
</script>
v-for
<body>
<div id="app">
<h1>v-for指令</h1>
<ul>
<li v-for="character in characters">{{ character }}</li>
</ul>
<hr>
<ul>
<li v-for="(user,index) in users">
{{ index }} - {{ user.name }}, {{ user.age }}
</li>
</ul>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
characters: ['Mario', 'Luffy', 'Goffy'],
users: [
{
name: 'Henry',
age: 30
},
{
name: 'Bucky',
age: 25
},
{
name: 'Emily',
age: 18
}
]
}
})
</script>
网友评论