vuejs模板使用方法

本文轉載自查看原文 2017-03-10 15:10 5599 vue

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VueJS簡明教程(一)之基本使用方法 ejs 模板使用方法 Vue學習一：{{}}html模板使用方法 python(urlparse)模板使用方法總結不使用 webpack，vuejs 異步加載模板微信小程序————模板使用方法 django模板中的extends和include使用方法 vue init定制團隊模板使用方法 js模板引擎art-template使用方法 discuz 模板中如何使用方法和語言標簽？