• 上一篇: vue简单入门（一）vue是什么，为... 下一篇:学习Vue2.0的建议顺序

<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>

<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>

脚本宝典总结

以上是脚本宝典为你收集整理的vue入门笔记体系（三）vue数据绑定全部内容，希望文章能够帮你解决vue入门笔记体系（三）vue数据绑定所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。