数据绑定最常见的形式就是使用Mustache语法(双括号)的文本插值
<p>{{message}}</p>
Mustache标签会被替换成Vue实例中数据对象message属性的值。只要绑定的数据对象上message属性发生了改变,插值处的内容就会被更新。
这种传送数据方式跟之前不一样,之前我们做页面都是直接写
<h2>你好,世界<h2>
现在不是我们会通过变量的方式,把信息放到变量当中然后通过Mustache语法显示出来
  <div id="vm">
            {{message}}
    </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        var vm = new Vue({
           data:{
               message:"yang"
           }
        }).$mount('#vm')
       
    </script>

显示效果

除此之外,双括号表示法还可以识别js语法并进行解析
 <div id="vm">
            {{message}}
            {{a+b}}
            {{message.split('').reverse().join('')}}
    </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        var vm = new Vue({
           data:{
               message:"yang",
               a:1,
               b:2
           }
        }).$mount('#vm')
       
    </script>

效果
要注意:每个绑定都只能包含单个表达式,所以下面的示例都不会生效。

            <!-- 这是语句,不是表达式 -->
            <!-- {{var ee = 1}} -->
            <!-- if语句也不会生效,可以使用三元表达式来代替 -->
            <!-- {{if(ok) { return message}}} -->
Logo

前往低代码交流专区

更多推荐