vue 中使用style class（樣式）

vue中使用style樣式

<div id="app">
   <h1 :style="styleObj1">111</h1>
   <h1 :style="[styleObj1,styleObj2]">222</h1>
</div>
 <script>
     //創建Vue實例 得到ViewModel
   var vm = new Vue({
         el:"#app",
    data(){
    return {
     styleObj1:{color:'red','font-weight': 200},
     styleObj2:{ 'font-style':'italic' }
    }
    },
    methods:{}
  })
     </script>

vue中經常遇到這樣的需求就是，點擊自身標籤顏色發生變化，點擊其他時恢復原來的顏色

.newClass{
background-color: red;
}

<div id="app">
   <h1 v-for="(v，i) in datas" @click="add(i)" v-text="v.name" :class={newClass:i==sel}></h1>
</div>
 <script>
     //創建Vue實例 得到ViewModel
   var vm = new Vue({
         el:"#app",
    data(){
    return {
      sel:0,//默認第一個是有背景色的
      datas:[
      {name:"朱康宇"}，
      {num:22}
      ]
    }
    },
    methods:{
    add(i){
   this.sel = i  //點擊哪個  哪個變色，其他變回原色
   }
   }
  })