Vue 数据绑定
数据绑定就是将页面的数据和视图关联起来,当我们的数据变化的时候,视图可以自动更新。插值文本插值是数据绑定的最基本形式,使用双花括号“{{ }}”,这种语法在Vue里面也称之为Mustache语法。<div id="app">{{content}}</div><script src="h...
数据绑定就是将页面的数据和视图关联起来,当我们的数据变化的时候,视图可以自动更新。
插值
文本插值是数据绑定的最基本形式,使用双花括号“{{ }}”,这种语法在Vue里面也称之为Mustache语法。
<div id="app">
{{content}}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
content: 'Vue 学习教程'
}
})
</script>
效果图:
{{content}}标签会被相应的数据对象也就是我们在Vue的data里面定义的content属性的值替换,当content的值发生变化的时候,文本值会随着content值的变化而自动更新视图的。
这里我们给一个小例子,实时显示当前时间:
<html>
<head>
<meta charset="utf-8">
<title>Vue 数据绑定</title>
</head>
<body>
<div id="app">
{{date}}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
mounted: function(){
var vm = this;
this.timer = setInterval(function(){
vm.date = new Date();
console.log('New date:' + vm.date);
},1000);
},
beforeDestroy: function(){
if(this.timer){
clearInterval(this.timer);
}
}
})
</script>
</body>
</html>
运行效果:
大家可以看到,每隔一秒页面就会自动更新时间,这个大家可以自己运行一下。
注意:双大括号会把里面的值全部当作字符串处理
表达式
Vue.js只支持单个表达式,不支持语句和流控制,还有在表达式中,不能使用用户自定义的全局变量,只能使用vue白名单内的全局变量,比如Math、Date等。
<html>
<head>
<meta charset="utf-8">
<title>Vue 数据绑定</title>
</head>
<body>
<div id="app">
{{number/100}}
{{completed ? '完成' : '未完成'}}
{{text.split('.').reverse().join(".")}}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
number: 100,
completed: true,
text: '123.456'
}
})
</script>
</body>
</html>
效果图:
过滤器
Vue.js允许我们在表达式后面添加过滤符(|),代码示例:
{{ book | filtersA }}
其语法格式很简单,如上所示。本质来说filtersA就是一个函数,所以可以有参数。
下面我们通过代码来看下实际中怎么在Vue中使用过滤器。
<html>
<head>
<meta charset="utf-8">
<title>Vue 数据绑定</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in books">
<label>{{item.book | showBook }}</label>
</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
books:[
{ book: 'Vue'},
{ book: 'PHP'},
{ book: 'C#'},
{ book: 'C++'},
{ book: 'Java'}
]
},
filters: {
showBook: function(value){
return value.toUpperCase();
}
}
})
</script>
</body>
</html>
这里我们使用最简单的将书名在输出的时候转化为大写。效果如下:
这里的说明一下,过滤器一般是用于简单的文本转换,如果要实现更为复杂的数据变化,那么应该使用后面会介绍的计算属性。
更多推荐
所有评论(0)