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

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：

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

JS：

var vm4=new Vue({

el:'#test04',

data:{

message:'hello'

}

});

页面效果截图：

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

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

遇见 vue.js --------阿文的vue.js学习笔记（4）------模板语法
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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