<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<h1 :class="msg">hello</h1>
<h1 :class="{active:isActive}">hello2</h1>
<button @click="toggleActive">切换active</button>
<h1 :class=arr>hello3</h1>
<h1 :class="[classname4,{active:isActive}]">hello4</h1>
</div>
</template>
<script>
export default{
name:'App',
data(){
return{
msg:"helloworld",
isActive:true,
arr:['swiper','active'],
classname4:"abc"
}
},
methods:{
toggleActive(){
this.isActive= !this.isActive,
this.arr.pop()
this.classname4="cba"
}
}
}
</script>
<style>
.active{
background: yellowgreen;
}
</style>
<template>
<div>
<h1 :style="msg">hello</h1>
<h1 :style="{background:'purple'}">hello2</h1>
<h1 :style="styleObj">hello3</h1>
<h1 :style="[styleObj,{width:'500px'}]">hello4</h1>
<button @click="toggleActive">切换active</button>
</div>
</template>
<script>
export default{
name:'App',
data(){
return{
msg:"background:yellow;",
isActive:true,
arr:['swiper','active'],
classname4:"abc",
styleObj:{
background : 'pink',
border:'1px solid blue',
boxSizing:"border-box"
}
}
},
methods:{
toggleActive(){
this.styleObj.backgroundColor = "skyblue"
}
}
}
</script>
<style>
.active{
background: yellowgreen;
}
</style>