[聚合文章] web前端vue:可以使用javascript的表达式解析

JavaScript 1900-01-01 24 阅读
代码实例

学了怎么久的vue到现在为止在我们的模板组件中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持,如下代码实例:

<div>{{number + 2}} </div> // 一个简单的加计算<div>{{OK?'显示':'不显示'}} </div>  // 三元计算<div>{{ qihui.split('').reverse().join('') }}</div> // 或对更复杂的对数组或对象删除添加操作

上面这些实例只能在当前组件的作用域内才有效,然后被JavaScript 解析,然而它这里还有个限制:就是每个绑定都只能包含单个表达式,所以下面的例子都是不会生效的。

<div>{{ let q = 2 }}</div>  //这个不是表达式<div>{{if(ok){return '显示'}}}</div> //流控制也不会生效,请使用三元表达式

下面再为大家举三个很常用的例子:

<div>{{val? val: '0'}}</div> // 简单的三元表达式,这里两次都提到了,所以是重点<div>{{val / 60}}</div>  // 简单的数学算数运算,当然‘加减乘除’都可以<div>{{(val / 60) * 10 - 10+20}}</div> // 或者更复杂的算数运算<div>{{Function('传值')}}</div>  //这是一个方法的调用methods:{  // 方法  Function(val){    return val  }}

有不懂的朋友或喜欢前端的同学可以加我微信(nihaomeili87)我们一起进步!等你噢~

注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。