Vue 数据绑定

数据绑定就是将页面的数据和视图关联起来，当我们的数据变化的时候，视图可以自动更新。插值文本插值是数据绑定的最基本形式，使用双花括号“{{ }}”,这种语法在Vue里面也称之为Mustache语法。<div id="app">{{content}}</div><script src="h...

rainynights

5281人浏览 · 2018-06-23 18:23:41

rainynights · 2018-06-23 18:23:41 发布

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

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

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^