Vue 数据绑定

叁歲伎倆 2022-05-22 11:52 211阅读 0赞

数据绑定就是将页面的数据和视图关联起来，当我们的数据变化的时候，视图可以自动更新。

**插值**  
文本插值是数据绑定的最基本形式，使用双花括号“\{ \{ \}\}”,这种语法在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>

效果图：  
![这里写图片描述][70]

\{ \{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>

运行效果：  
![这里写图片描述][70 1]

大家可以看到，每隔一秒页面就会自动更新时间，这个大家可以自己运行一下。

*注意：双大括号会把里面的值全部当作字符串处理*

**表达式**  
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>

效果图：  
![这里写图片描述][70 2]

**过滤器**  
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>

这里我们使用最简单的将书名在输出的时候转化为大写。效果如下：  
![这里写图片描述][70 3]

这里的说明一下，过滤器一般是用于简单的文本转换，如果要实现更为复杂的数据变化，那么应该使用后面会介绍的计算属性。

[70]: /images/20220522/2d004040ff9c4d02b57dc59cd1fdd263.png
[70 1]: /images/20220522/72d4310a2ffe471c834366cf68ae2ab7.png
[70 2]: /images/20220522/0a3fe0f54e2346049a139f8b5cbcc7d7.png
[70 3]: /images/20220522/934cdfc9fa1c4ee1881ab6bc7e62c8ce.png