五、Vue的绑定语法

文本插值数据绑定的基础形式是文本插值，使用{{}}语法。{{msg}}可以使用在html标签中，也可以使用在html的特性中。

   <span>{{msg}}</span>
   <div name='{{msg}}'></div>

一般使用都是双向绑定，即{{msg}}标签会被对应的数据对象msg的值替换掉，每当msg对象的值发生改变时，同时会更新该标签的值。

2. 单次插值，数据的变化不再更新插值。

   <div name='{{ * msg}}'></div>

3. 数据绑定内支持js表达式

   <span>{{num + 1}}</span>
   <span>{{value > 0 ? 'true' : 'false' }}</span>

4. 过滤器(filter) vue允许表达式后通过管道符的形式(|)添加过滤器，filter的其实就是一个函数，接收过滤对象作为参数值，处理后返回。

   <span>{{firstname | uppercase}}</span>

过滤器可以同时使用多个，vue提供了部分内置过滤器，当然我们也可以定义自己的过滤器。

5. 指令(directives) vue的指令是带有v-前缀的特殊特性。本质就是一个特殊标记，让处理模版的库知道在这里的DOM要有对应的一些处理。指令的职责就是当表达式的值发生改变时，将对应的行为应用到DOM上。

   <span v-if="data"></span>

指令中使用数据对象不需要加{{}} vue的指令api请参考http;//cn.vuejs.org/api/#指令

6. 计算属性表达式在模版试用于简单的操作，如果有过多的逻辑，会让表达式难以维护，这个时候可以考虑使用计算属性。 vue中使用computed选项定义计算属性。

   var vm = new Vue({
        el: '#app',
        data: {},
        computed: {
            // 一个计算属性的 getter
            getFullName: function () {
            // `this` 指向 vm 实例
            //逻辑处理
                return data;
            }
        }
    })

如果觉得我的文章对您有用，请随意打赏。

您的支持将是我最大的动力！

五、Vue的绑定语法

Latest Post