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>