🏠個人主頁：Yui_
🍑操作環境：vscode\node.js
🚀所屬專欄：Vue3

1. 指令修飾符

Vue 的指令修飾符（modifier）是以點（.）表示的特殊后綴，用于改變指令的行為。
修飾符讓指令更靈活，能滿足更多實際開發需求。

1.1 按鍵修飾符

• @keydown.enter當enter鍵按下時觸發
• @keyup.enter當enter鍵抬起時觸發
  演示：

<template>
<div><input type="text" @keydown.enter="fn">
</div>
</template><script setup>const fn = ()=>{console.log('enter鍵被按下~')}
</script><style scoped></style>

1.2 事件修飾符

• @事件名.stop 阻止冒泡
• @事件名.prevent 阻止默認行為
• @事件名.stop.prevent既阻止冒泡又阻止默認行為

<template><div @click="onDivClick"><a href="https://baidu.com" @click.prevent>百度一下</a><p @click.stop="onPClick"></p><a href="https://baidu.com" @click.stop.prevent>百度一下</a></div>
</template><script setup>
const onPClick = () => {console.log('onPClick');
}const onDivClick = () => {console.log('onDivClick');
}
</script><style>
div {width: 400px;height: 200px;background: plum;
}div a {display: block;width: 100px;text-decoration: none;background: tomato;text-align: center;color: #fff;
}div p {width: 200px;height: 100px;background: rebeccapurple;
}
</style>

1.3 v-model修飾符

• v-model.trim 去除首尾空格
• v-model.number 用parseFloat()轉數字
• v-model.lazy 失去焦點時同步數據，而不是輸入時同步數據

<template>
<div>名稱：<input type="text" v-model.lazy="goods.name"> <br><br>價格：<input type="text" v-model.trim="goods.price"> <br> <br>數量：<input type="text" v-model.number="goods.count"> <br> <br>
</div>
</template><script setup>import {reactive} from 'vue'const goods = reactive({name:'',price:'',count:''})
</script><style scoped></style>

2. v-model用在其他表單元素上

常見的表單元素都是可以用v-model綁定關聯，作用是可以快速獲取或者設置表單元素的值它會根據控件自動選取正確的屬性來更新元素。

輸入框 input:text ——> value
文本域 textarea ——> value
下拉菜單 select ——> value
單選框 input:radio ——> value
復選框 input:checkbox ——> checked / value

演示：

<template><div><!-- ?本域 --><textarea v-model="intro" cols="30" rows="4" placeholder="請輸??我介紹"></textarea><br /><br /><!-- 下菜菜單 --><select v-model="city"><option value="BJ">北京</option><option value="SH">上海</option><option value="SZ">深圳</option><option value="HZ">杭州</option></select><br /><br /><!-- 單選框：多個當中只能選擇?個，需要給單選框?動添加 value 屬性 --><input type="radio" value="a" v-model="blood" />A<input type="radio" value="b" v-model="blood" />B<input type="radio" value="ab" v-model="blood" />AB<input type="radio" value="o" v-model="blood" />O<br /><br /><input type="checkbox" v-model="isAgree" />是否同意??協議<br /><br /><input v-model="hobby" type="checkbox" value="LQ" />籃球<input v-model="hobby" type="checkbox" value="ZQ" />?球<input v-model="hobby" type="checkbox" value="YMQ" />??球<input v-model="hobby" type="checkbox" value="PPQ" />乒乓球<br /><input v-model="hobby" type="checkbox" value="PB" />跑步<input v-model="hobby" type="checkbox" value="YY" />游戲<input v-model="hobby" type="checkbox" value="PLT" />普拉提<input v-model="hobby" type="checkbox" value="LDW" />拉丁舞</div>
</template><script setup>
import { ref } from 'vue'//自我介紹
const intro = ref('')//收集城市
const city = ref('')//血型
const blood = ref('')//是否同意用戶協議
const isAgree = ref(false)//愛好
const hobby = ref(['a'])
</script><style scoped></style>

結論：

• 對于下拉表的值，v-model寫在select上，關聯選中option的value
• 對于當選框的值，v-model收集單選框的value
• 對于復選框，一個復選框，v-model綁定布爾值，關聯checked屬性，一組復選框，v-model綁定數組，關聯value屬性，給復選框手動天津value

3. 樣式綁定

在 Vue 中，樣式綁定常用 v-bind:class 和 v-bind:style（或它們的簡寫 :class、:style）來實現動態樣式。

3.1 操作class

語法：

:class = "三元表達式/對象"

三元表達式

<p :class="條件?'類名1':'類名2'"></p> 

對象語法
當class動態綁定的是對象時，鍵就是類名，值就是布爾值，如果值為true，就添加這個類，否則就刪除這個類。

<p :class="{類名1:布爾值1,類名2:布爾值2}"></p> 

注意：靜態class可以于動態class共存

<p class="box" :class="{類名1:布爾值1,類名2:布爾值2}"></p> 

演示：

<script setup>
import { ref } from 'vue'
// 是否處于激活
const isActive = ref(true)
</script>
<template><div><!-- 1. 三元綁定 --><p :class="isActive ? 'active' : ''">Active1</p><!-- 2. 對象綁定 --><p :class="{ active: isActive }">Active2</p><!-- 3. 靜態class與動態class共存 --><p class="item" :class="{ active: isActive }">Active3</p></div>
</template>
<style>
.active {color: red;
}
</style>

4. 操作style

語法

<div class="box" :style = "{CSS屬性名1:CSS屬性值,CSS屬性名2:CSS屬性值}"> </div>

演示

<script setup>
import { reactive } from 'vue'
// ?內樣式對象
const styleObj = reactive({color: '#fff',backgroundColor: 'purple'
})
</script>
<template><div><p :style="styleObj">hahahahha</p></div>
</template>
<style></style>

5. 總結

Vue3指令補充的內容就到這里了，通過這些對指令應用的補充，可以更加方便我們實現想要的功能。

往期文章：
Vue3入門-必會前置知識-CSDN博客
Vue3入門-聲明式渲染+數據響應式-CSDN博客
Vue3入門-指令-CSDN博客