這里的綁定其實就是v-bind的綁定，如代碼所示，div后面的引號就是v-bind綁定，然后大括號將整個對象括起來，對象內先是屬性，屬性后接的是變量，這個變量是定義在script中的，后通過這個變量，來控制屬性，實現綁定。

先設置個盒子，并為其設置style樣式，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box"></view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)const Size = ref(30) ;let i = 0 ;  //這個值不在模板層渲染，可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.value = arrs.value[i%4] ;},1000)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;
}
.active{background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

效果如下：

再添加一個類名，為其設置樣式，也就是說，用兩個類名作用于同一個盒子。繼續在盒子中添加文字，設置字體大小，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box active">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)const Size = ref(30) ;let i = 0 ;  //這個值不在模板層渲染，可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.value = arrs.value[i%4] ;},1000)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

效果如下：

如圖所示，現在實現了兩個類名共同作用于一個類名，且在兩個類名定義相同屬性的情況下，下方的樣式會優先作用于類。

現在，嘗試把active變成動態的值，先刪掉之前定義的active，現在用v-bind形式定義active，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box" :class = "'active'">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)const Size = ref(30) ;let i = 0 ;  //這個值不在模板層渲染，可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.value = arrs.value[i%4] ;},1000)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

這里的顯示效果和剛剛的效果相同。這里請注意定義active時的格式，尤其是在使用動態綁定，要加上一個單引號，以表示它是字符串類型的類名，否則沒法作用上的。

接下來，嘗試用一個值來控制active，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box" :class = "{active:true}">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)const Size = ref(30) ;let i = 0 ;  //這個值不在模板層渲染，可以不用refsetInterval(()=>{i++ ;Size.value += i ;isactive.value = !isactive.valuepicurl.value = arrs.value[i%4] ;},1000)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

如開頭所說的，這里用大括號將整個對象括起來，對象內包含了屬性active，屬性后接的是變量，可以寫上true或者false，以控制active，這里我們用的是true，效果如下：

還可以將這個變量定義在script中，后通過這個變量，來控制屬性，實現綁定，這里我們定義變量為false，記住一定要用ref來定義，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box" :class = "{active:isactive}">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(false)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

效果如下：

這是一種方法， 日常使用中，還可以使用三元表達式來控制active，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box" :class = "true?'active' : ' ' ">v-bind指令</view>
</template><script setup>import { ref } from 'vue';const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

當然，三元表達式的判斷條件也可以填入剛剛設置的isactive變量。
接下來，把變量放入定時器，讓其動態改變，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box" :class = "{active:isactive}">v-bind指令</view><view calss="box" :class = "isactive?'active':'box'"></view>
</template><script setup>import { ref } from 'vue';setInterval(()=>{isactive.value = !isactive.value},1000)const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

成功：

以上兩種都是常用的方式，接下來演示一下內聯的樣式，先寫個簡單的內聯樣式，設置第二個box的寬度，要注意的是，內聯樣式的權重更高，會覆蓋其他樣式，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box" :class = "{active:isactive}">v-bind指令</view><!-- <view calss="box" :class = "isactive?'active':'box'"></view> --><view class="box" style = "width: 300px;">內聯樣式</view>
</template><script setup>import { ref } from 'vue';setInterval(()=>{isactive.value = !isactive.value},1000)const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

效果如下：

如果要使用變量，就需要在style的前面加上冒號，并以對象的形式定義，剛剛定義了寬度，要用單引號括起來，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box" :class = "{active:isactive}">v-bind指令</view><!-- <view calss="box" :class = "isactive?'active':'box'"></view> --><view class="box" :style = "{width:'300px'}">內聯樣式</view>
</template><script setup>import { ref } from 'vue';setInterval(()=>{isactive.value = !isactive.value},1000)const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

或者用數字+‘單位’(例：260 + ‘px’ )這樣的形式寫出，也是可以的。

通過內聯，也可以實現動態變量，將字體大小定義為數字 + ‘單位’的形式，然后用變量替換掉數字，并將其放入定時器中，代碼如下：

<template><view><view><image :src="picurl"></image></view></view><button :loading="false">按鈕！</button><view class="box" :class = "{active:isactive}">v-bind指令</view><!-- <view calss="box" :class = "isactive?'active':'box'"></view> --><view class="box" :style = "{width:'300px',height:260 + 'px',fontSize:fontsize + 'px'}">內聯樣式</view>
</template><script setup>import { ref } from 'vue';let i = 0 ;let fontsize = ref(30) ;setInterval(()=>{isactive.value = !isactive.valuei ++ ; fontsize.value += i ;},1000)const arrs = ref(["../../static/pic1.png","../../static/pic2.png","../../static/pic3.webp","../../static/pic4.jpg"]) ;const picurl = ref("../../static/pic1.png") ;const isactive = ref(true)
</script><style lang="scss">
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green;  //下面的CSS可以覆蓋上面的color: white;
}
</style>

效果如下：