Vue 综合-模板的数据绑定

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',

  // template: `
  //   <div :id='divID' @click='handleClick'>
  //     <p v-html='html'></p>
  //   </div>`,

  template: `
    <div :class='{active:isActive}'
         :style='style1'>
      <p v-html='html'></p>
    </div>`,

  // template: `
  //   <div :class='[isActive?"active":""]'
  //        :style='[style1, style2]'>
  //     <p v-html='html'></p>
  //   </div>`,

  // template: `
  //   <div :class='[{active:isActive}]'>
  //     <p v-html='html'></p>
  //   </div>`,
    

  data:{
    divID: 'main',
    html: '<span>temp</span>',
    isActive: true,
    style1: {
      color: 'red',
      appearance: 'none' // 消除流浪器默认的样式，这么写的话流浪器会自己判断根据不同流浪器添加不同前缀，例如：-webkit-appearance: none;
    },
    style2: {
      color: 'pink'
    }
  },
  methods: {
    handleClick () { alert(1) }
  }
})