Vue.js学习笔记: 数据绑定语法---绑定表达式-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介:

1.JavaScript表达式

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

HTML:

1
2
3
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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:

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

JS:

1
2
3
4
5
6
var vm4=new Vue({
    el:'#test04',
    data:{
        message:'hello'
    }
});


页面效果截图:

wKiom1f57RaDyTr-AAFIetys5Kc452.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1859809

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章