你的位置:首页 > 软件开发 > Java > Vue数据绑定

Vue数据绑定

发布时间:2016-09-02 18:00:13
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定(1)写法一: {{message}},这种可以实时响应(2)写法二: {{*message}},单次插值,今 ...

Vue数据绑定

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04

 

一 双括号用来数据绑定

(1)写法一: {{message}},这种可以实时响应

(2)写法二: {{*message}},单次插值,今后的数据变化就不会再引起插值更新了

(3)双括号标签也可以用在属性上

举个栗子:

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>vue插值</title>    <script src='/images/loading.gif' data-original="../js/vue.js" type="text/javascript" charset="utf-8"></script>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <style type="text/css">      .lili-xiaoman {        color: red;      }    </style>  </head>  <body>    <div class="test">      <p>{{message}}</p> <!--这个值可以实时响应-->      <p>{{*message}}</p> <!--单次插值,今后的数据变化就不会再引起插值更新了,例如在控制台写入:myVue.message=123-->      <p class="lili-{{message}}">双括号标签也可以用在属性上</p>    </div>    <script type="text/javascript">      var myVue = new Vue({        el: ".test",        data: {          message:"xiaoman"        }      })    </script>  </body></html>

原标题:Vue数据绑定

关键词:VUE

VUE
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。