版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83386834
Vue的插值表达式{{}}
主要作用是进行数据绑定,最常见的形式是使用“Mustache”语法(双大括号)的文本插值。例如:<span>Message:{{msg}}</span>
Mustache标签将会被替代为对应数据对象上msg属性(msg定义在data对象中)的值。无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。
{{}}
对JavaScript表达式支持,例如:
{{number + 1}}
{{ok ? 'yes' : 'no'}}
{{message.split('').reverse().join('')}}
源码示例
源码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
{{hello + ' World !'}}<br>
{{hello == 'Hello' ? 'yes' : 'no'}}<br>
{{ hello.split('ll').reverse().join('aa') }}<br>
{{ judge(hello) }}
</div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//2、实例化Vue对象,其中vm:叫做MVVM中的View Model
var vm = new Vue({
el:'#app' //表示当前Vue对象接管app的div区域
,data:{
hello:'Hello' //相当于MVVM中的Model这个角色
,kw:''
}
,methods:{
judge(str){
//判断Hello是否与World相等,如果相等,返回true,如果不相等,返回false。
return str == 'World' ? true : false ;
}
}
});
</script>
</html>
运行结果:
分析:
上面的代码中一共有四个方法。
第一个{{hello + ' World !'}}
实际上是字符串拼接,由于hello
参数的值是Hello
,故拼接的结果是Hello World !
。
第二个{{hello == 'Hello' ? 'yes' : 'no'}}
是判断,hello
的值为Hello
,则返回yes
,否则返回no
。由于hello
的值确实为Hello
,故返回的值为yes
。
第三个{{ hello.split('ll').reverse().join('aa') }}
其实是先执行split()
方法,将Hello
以字符串ll
来进行分割,分割成he
和o
两个字符串,然后再执行reverse()
完成串数组的颠倒操作,变成o
和he
,最后执行join()
来插入aa
字符串,故最终的结果为:oaaHe
。
第四个{{ judge() }}
其实是调用了vm中的methods方法域中的judge()
函数,通过传入hello
参数,该参数的值为Hello
,然后再将其与World
字符串相比较,如果相同,则返回true
,否则则返回false
。由于Hello
与World
并不相同,故返回的值为false
。