目錄

一.class類的綁定

1.靜態編寫

2.動態編寫

二.style內聯樣式的綁定

三.事件處理

1.案例1

2.案例2

四.uniapp創建自定義頁面模板

1.為什么要這么做？

2.步驟

①打開新建頁面的界面

②在彈出的目錄下，新建模板文件

③用HBuilderX打開該模板文件，填寫代碼，并保存文件

④下次創建頁面時，直接創建該模板頁面即可，就能直接生成一個頁面的基礎代碼

---

一.class類的綁定

1.靜態編寫

代碼：

<template><view><button class="btn01 moreCss">更換樣式</button></view>
</template><script setup></script><style lang="scss">
.btn01{height:100px;width:100px;
}
.moreCss{background:pink;
}</style>

運行效果：

可見此時button元素，同時應用了btn01和moreCss這兩個Css樣式

2.動態編寫

代碼：

<template>	<view><button class="btn01" :class="isShow?'moreCss':''" @click="changeCss">更換樣式</button></view>
</template><script setup>
import {ref} from 'vue';
const isShow = ref(false);const changeCss = () => {isShow.value = !isShow.value;
}
</script><style lang="scss">
.btn01{height:100px;width:100px;
}
.moreCss{background:pink;
}
</style>

運行效果：

點擊一下這個按鈕，就會發生樣式的變化：

代碼解讀：

當我們點擊按鈕時，會讓isShow這個變量的值，從true/false之間切換，進而影響:class="isShow?'moreCss':''"這個三元表達式的值。

：class就是v-bind：class的簡寫，讓class可以動態賦值。

二.style內聯樣式的綁定

三.事件處理

1.案例1

代碼：

<template><view style="height:100px;width:100px;background: pink;" @click="addOne">{{ num }}</view>
</template><script setup>
import {ref} from 'vue';const num = ref(0);
const addOne = () => {num.value++;
}
</script><style lang="scss">
</style>

運行效果：

2.案例2

代碼：

<template><switch @change="onChange"/><button type="primary" :loading="isLoading">我的按鈕</button>
</template><script setup>
import {ref} from 'vue';
const isLoading = ref(false);
//切換switch開關，觸發的事件
const onChange = (e)=> {console.log(e.detail.value);//e.detail.value代表開關的狀態，值：true/falseisLoading.value = e.detail.value;
}
</script>
<style lang="scss">
</style>

運行效果：

四.uniapp創建自定義頁面模板

1.為什么要這么做？

因為以后使用uniapp寫項目，當創建頁面時，就可以直接創建頁面模版，里面包含了基本代碼。

2.步驟

①打開新建頁面的界面

②在彈出的目錄下，新建模板文件

③用HBuilderX打開該模板文件，填寫代碼，并保存文件

④下次創建頁面時，直接創建該模板頁面即可，就能直接生成一個頁面的基礎代碼

可見此時，直接通過模板生成了該頁面文件的基礎代碼。還是十分方便的！

以上就是本篇文章的全部代碼，喜歡的話可以留個免費的關注呦~~