vue的mustache语法

3月

本文最后更新于2020年03月08日，已经过了1776天没有更新，若内容或图片失效，请留言反馈

Vue在进行进行插值处理和绑定表达式时使用了一种叫Mustache模版引擎，Mustache是一个logic-less(轻逻辑)模板解析引擎,它的优势在于可以应用在Javascript、PHP、Python、Perl等多种编程语言中。

mustache语法（双大括号语法）就是 {{KeyName}} 花括号里的 keyName表示键名，在渲染时vue会将键名替换为它在vue实列中所对应的值。

{{message}}

无论何时，绑定的数据对象上 message属性发生了改变，插值处的内容都会更新。

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div class="app">
        <h1>{{message}}</h1>

<!-- mustache语法中不仅可以直接写变量，也可以写简单的表达式 -->
        <h1>{{firstName + " " + lastName}}</h1>
        <h1>{{firstName}} {{lastName}}</h1>
        <h1>{{count * 2}}</h1>    
        <h1>{{new Date() + count * 2}}</h1><!-- 200 -->
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">

        const app= new Vue({
            el:".app",
            data:{
                message:"xiufan",
                firstName:"liu",
                lastName: "si",
                count: 100
            }
        })

    </script>
</body>
</html>

运行结果

xiufan
liu si
liu si
200
Fri Mar 06 2020 17:21:39 GMT+0800 (中国标准时间)200

在代码中vue实列的data对象中有4个属性message、firstName、lastName，count，当他们的值修改时，他们所对应的插值处数据都会更新。
具体验证方法：运行代码后，进入控制台输入app.任意一个属性="修改后的属性"修改data中任意一个属性的值后，页面中的值会同步更新。
列：app.firstName="yuan"

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢