vue3动态的改变样式

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的语法，同时将动态的样式使用${}包裹起来