Vue.js学习笔记： 数据绑定语法---绑定表达式

Posted 2020-08-13

1.javascript表达式

放在双大括号标签内的文本称为绑定表达式。在Vue.js中，一段绑定表达式由一个简单的JS表达式和可选的一个或多个过滤器构成

html：

<span id="test01">数字加减：{{number+1}}</span><br>
<span id="test02">三目运算：{{ok?‘yes‘:‘no‘}}</span><br>
<span id="test03">JS表达式：{{message.split(‘‘).reverse().join(‘‘)}}</span><br>

JS：

var vm1=new Vue({
    el:‘#test01‘,
    data:{
        number:3
    }
});
var vm2=new Vue({
    el:‘#test02‘,
    data:{
        ok:‘yes‘
    }
});
var vm3=new Vue({
    el:‘#test03‘,
    data:{
        message:‘Roger‘
    }
});

2.过滤器

Vue.js允许在表达式后添加可选的“过滤器(Filter)”，以“管道符”指示。

这里我们将表达式message的值“管输（pipe）”到内置的capitalize过滤器，这个过滤器其实只是一个JS函数，返回大写话的值。 Vue.js提供了数个内置过滤器

HTML：

<span id="test04">{{message|capitalize}}</span> <!--capitalize:首字母大写-->

JS：

var vm4=new Vue({
    el:‘#test04‘,
    data:{
        message:‘hello‘
    }
});

页面效果截图：

本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1859809