在Vue中，数据的绑定使用的是一个使用“{{}}”符号的Mustache语法。Mustache 是一款「logic-less（轻逻辑）」的前端模板引擎，它原本是基于 javascript 实现的，但是因为轻量易用，所以经过拓展目前支持更多的平台。
Mustache语法官网 http://mustache.github.io/
mustache： 是"胡子"的意思, 因为嵌入标记像胡子 {{}} .
Vue.js中的mustache语法与其他的并不通用.Vue.js提供了完全的 JavaScript 表达式支持。
孤狼 | 
2022-07-29 00:04:33 | 
1033°C | 
0条评论 ]{{keyName}} 简单的变量替换
{{keyName}}XXX 变量替换拼接固定内容
{{keyName1 + keyName2}} 变量替换并拼接
{{keyName1 +'窝草'+ keyName2}} 变量替换并拼接固定内容
{{keyName1}}{{keyName2}} 多变量替换
{{keyName1*5}} 变量计算
{{keyName1++}} 变量计算自增(TIP会死循环)
{{keyName1>5?大于5:不大于5}} 三元运算
{{message.split(' ').join(',')}} 连续操作运算Vue.js中的Mustache语法不支持表达式以外的操作和逻辑如if,定义变量等
{{if(keyName1>5){return 'yes';}}} 报错
{{var a='123'}} 报错TIP:mustache语法只能替换操作内容不能替换属性,只对HTML标签之间内容起作用(同JS中的innerHTML作用域)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Mustache</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="msg">
<div>{{n1}}</div>
<div>{{n1}},世界</div>
<div>{{n1}} {{n2}}</div>
<div>{{n1+n2}}</div>
<div>{{n1+','+n2}}</div>
<div>{{n1}} : {{n2}}</div>
<div>{{n3 + 1}}</div>
<div>{{n3>5?'n3大于5':'n3不大于5'}}</div>
<div>{{n4}} => {{n4.split(' ').join(',')}}</div>
</div>
<script>
let ndata={
n1:'你好',
n2:'世界',
n3: 5,
n4:'hello world'
};
const v=new Vue({
el:"#msg",
data:ndata
});
</script>
</body>
</html>
赞赏一个鸡腿
