vue入門筆記體系（三）vue數據綁定

vue數據綁定

簡單數據綁定

<div id="counter-app">
  <h1>已續命{{count}}</h1>
    <p>{{isActive?"active":""}}</p> //簡單運算符
    <p>{{Date.now()}}</p> //能夠調用原生js全局變量，但不能夠調用本身定義的全局變量
    <p v-html="html"></p> //綁定html內容
    <p :id="ID"></p>    //綁定屬性數據
    <p @click="handleClick"></p>//綁定事件
  <button @click="count++">喜+1</button>
</div>

<script>
  var counterApp = new Vue({
    el: '#counter-app',
    data: {
      count: 0,
      isActive:false,
      html:'<span>123</span>',
      ID:"main"
    },
    methods:{
        handleClick(){
            console.log('click')
        }
    }
  })
</script>

class&style綁定

<div id="counter-app">
    <p :class="{active:isActive}"></p>//根據isActive來是否添加active類名,對象形式
    <p :class="[isActive?'active':'']"></p>//根據isActive來是否添加active類名，數組形式
    <p :class="[{active:isActive}]"></p>//根據isActive來是否添加active類名，數組和對象結合
    <p :class="[{active:isActive}]" :style="[styles,styles2]"></p>//根據isActive來是否添加active類名，數組和對象結合
</div>

<script>
  var counterApp = new Vue({
    el: '#counter-app',
    data: {
      count: 0,
      isActive:false,
      html:'<span>123</span>',
      ID:"main",
      styles:{  //vue能夠自動加上兼容性
          color:red
      },
      styles2:{
          font-size:18px
      }
    },
    methods:{
        handleClick(){
            console.log('click')
        }
    }
  })
</script>