三、Vue基础系统-Mustache语法

作者: 温新

分类: 【Vue.js】

阅读: 2423

时间: 2020-09-08 12:38:03

数据绑定使用“Mustache”语法(双括号)的文本插值,也就是{{}}数据替换。

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(255, 203, 107)"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">meta</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">charset</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"utf-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>Mustache语法<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">src</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>{{ firstName }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>{{ lastName }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>{{ firstName + lastName }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>{{ firstName }} {{ lastName }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>{{ age * 2}}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>{{ lastName.split('.').reverse().join('.') }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>{{ age ? '1岁了':'0岁了' }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box;color: rgb(130, 170, 255)">app</span> <span style="box-sizing: border-box;color: rgb(137, 221, 255)">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(240, 113, 120)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">     <span style="box-sizing: border-box;color: rgb(199, 146, 234)">firstName</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'自如初'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">     <span style="box-sizing: border-box;color: rgb(199, 146, 234)">lastName</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'https://www.ziruchu.com'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">     <span style="box-sizing: border-box;color: rgb(199, 146, 234)">age</span>:<span style="box-sizing: border-box;color: rgb(255, 83, 112)">1</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>

从上面的安全中可以看到,Vue中的Mustache中语法支持基础的运算。关于更多的用法,官方文档更加详细。

我是小白,期待和优秀的你一起同行!

小白

2020年09月08日

请登录后再评论