【Vue笔记】绑定class样式、绑定内联style样式

绑定class样式

1.字符串写法，适用于：样式的类名不确定，需要动态指定

<div id="root">
<div class="basic"  :class="a" @class="changeMood">{
  {name}}</div>
</div>

<script type="text/javascript">
Vue.config.productionTip = false

new Vue ({
    el:'#root',
    data:{
       name:'翘阳'
       a:'normal'   //normal样式
    },
    methods:{
       changeMood(){
           this.a='happy'
        }
     },
})
</script>

点击切换随机心情：

method:{
  changeMood(){
      const.arr = ['happy','sad','normal']
      const index =  Math.floor(Math.random()*3)
      this.a = arr[index]

}