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的語法，同時將動態的樣式使用${}包裹起來