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  //点击哪个  哪个变色，其他变回原色
   }
   }
  })