您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— Mustache语法

《和小米一起学Vue.js》— Mustache语法

[ 孤狼 | 2022-07-29 00:04:33 | Vue | 1348°C | 0条评论 ]

在Vue中,数据的绑定使用的是一个使用“{{}}”符号的Mustache语法。Mustache 是一款「logic-less(轻逻辑)」的前端模板引擎,它原本是基于 javascript 实现的,但是因为轻量易用,所以经过拓展目前支持更多的平台。


Mustache语法官网  http://mustache.github.io/ 

mustache: 是"胡子"的意思, 因为嵌入标记像胡子 {{}} .  
Vue.js中的mustache语法与其他的并不通用.Vue.js提供了完全的 JavaScript 表达式支持。  


Vue中Mustache语法常用

{{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>





转载请注明出处:http://gl.paea.cn/n.php?n=168
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索