vue中的dom基本渲染

一、输出动态标签
请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值，容易导致xss攻击。

<div id="J_app">
    <div v-html="rawHtml"></div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    rawHtml:'<p>输出标签和内容</p>'
  }
})

二、输出动态文本内容

<div id="J_app"> {{ info }} </div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    info: 'Hello Vue!'
  }
})

三、输出标签的id属性动态值

<div id="J_app">
    <span v-bind:id="dynamicId">这个标签的id是动态的</span>
    <span :id="dynamicId">v-bind缩写，这个标签的id是动态的</span>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    dynamicId: 'J_tab'
  }
})

四、输出标签的title属性动态值

<div id="J_app">
  <span v-bind:title="labelTitle">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  <span :title="labelTitle">
    v-bind缩写，鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    labelTitle: '页面加载于 ' + new Date().toLocaleString()
  }
})

五、输出标签的class属性动态值

1、对象写法

<div id="J_app">
  <div class="initCls" v-bind:class="{ cls1: isCur, 'cls-2': hasError }">对象写法</div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    isCur: true,
    hasError: false
  }
})

<div id="J_app">
  <div v-bind:class="classObject">对象写法</div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    classObject: {
      cls1: true,
      'cls-2': false
    }
  }
})

<div id="J_app">
  <div v-bind:class="classObject">对象写法</div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    isCur: true,
    hasError: false
  },
  computed: {
    classObject: function () {
      return {
        cls1: this.isCur && !this.hasError,
        'cls-2': this.hasError
      }
    }
  }
})

2、数组写法

<div id="J_app">
  <div v-bind:class="[classone, classtwo]">数组写法</div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    classone: 'cls1',
    classtwo: 'cls-2'
  }
})

<div id="J_app">
  <div v-bind:class="[isCur ? classone : '', classtwo]">数组写法，三目运算符</div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    isCur: true,
    classone: 'cls1',
    classtwo: 'cls-2'
  }
})

<div id="J_app">
  <div v-bind:class="[{ cls1: isCur }, classtwo]">数组写法，内嵌对象</div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    isCur: true,
    classtwo: 'cls-2'
  }
})

六、输出标签的style属性动态值

<div id="J_app">
  <div v-bind:style="{ color: activeColor, fontSize: fontNum + 'px' }">style属性</div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    activeColor: 'red',
    fontNum: 30
  }
})

<div id="J_app">
  <div v-bind:style="styleObject">style属性</div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    styleObject: {
      color: 'red',
      fontSize: '30px'
    }
  }
})