Vue 数据绑定-蒲公英云

Vue 数据绑定

叁歲伎倆 2022-05-22 11:52 297阅读 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>

效果图：
这里写图片描述

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