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