VUE3动态的改变样式的方式
<button :class=" `btn btn-sm ${toggleBtn}` ">{{!isDisabled :"更新":"详情"}}</button>
<script>
import(ref,computed) from "vue"
export default{
setup(){
const isDisabled = ref(ture);
const toggleBtn= computed(() =>{
return !isDisabled?"btn-success":"btn-paramy"
})
return{ isDisbled,toggleBtn}
}
}
</script>
注意：
1.绑定样式 ：class是需要用到computed的，也就是需要在顶部加入computed,因为isDisabled涉及到v-if所以在顶部也加入了ref
2.在绑定样式中，需要将绑定的样式全部用``引号包裹起来，这是S6的语法，同时将动态的样式使用${}包裹起来