vuejs模板使用方法

vuejs的模板功能很强大，下面是一些demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="https://unpkg.com/vue@2.2.2/dist/vue.js"></script>
</head>

<body>
  <div id="app" v-html="htmlDemo"></div>
  <div id="app1" :id="idDemo">属性</div>
  <div id="app2">{{msg}}</div>
  <button id="app3" :disabled="bool">button</button>
  <div id="app4">{{number + 1}}</div>
  <div id="app5">{{bool ? 'ok' : 'no'}}</div>
  <div id="app6" :id="'list-' + idNum"></div>
  <div id="app7" v-bind:id="rawId | formatId">过滤器</div>
  <script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      htmlDemo: '<span>hello vue</span>'
    }
  });
  var app1 = new Vue({
    el: '#app1',
    data: {
      idDemo: 'myId'
    }
  });
  var app2 = new Vue({
    el: '#app2',
    data: {
      msg: '这里只能是字符串'
    }
  });
  var app3 = new Vue({
    el: '#app3',
    data: {
      bool: false
    }
  });
  var app4 = new Vue({
    el: '#app4',
    data: {
      // number: '1'
      number: 1
    }
  });
  var app5 = new Vue({
    el: '#app5',
    data: {
      bool: true
    }
  });
  var app6 = new Vue({
    el: '#app6',
    data: {
      idNum: 2
    }
  });
  var app7 = new Vue({
    el: '#app7',
    data: {
      rawId: 'demo'
    },
    filters: {
      formatId: function(value) {
        if (!value) {
          return ''
        };
        value = value.toString().toUpperCase();
        return value;
      }
    }
  });
  </script>
</body>

</html>

 

posted @ 2017-03-10 15:10  wmui  阅读(6518)  评论(2)  编辑  收藏  举报