【Vue】指令扩充（指令修饰符、样式绑定）
目录
指令修饰符
按键修饰符
事件修饰符
双向绑定指令修饰符
输入框
表单域
下拉框
单选按钮
复选框
样式绑定
分类
绑定class
绑定style
tab页切换示例
指令修饰符
作用
借助指令修饰符，可以让指令的功能更强大
分类
- 按键修饰符：用来检测用户的按键，配合键盘事件使用，keydown和keyup
- 事件修饰符：简化程序对于阻止冒泡、阻止默认行为的操作
- 双向绑定指令修饰符：可以让v-model的功能更强大
按键修饰符
如下，.enter指定只有按了回车按钮才触发，其他键盘事件不触发
<template>
<div>
<input type="text" @keydown.enter="onKeydown" />
</div>
</template>
<script setup>
import { ref } from 'vue'
const onKeydown = (event) => {
console.log(event.key)
}
</script>
事件修饰符
阻止默认行为,如下会阻止页面跳转
<a href="https://baidu.com" @click.prevent>百度一下</a>
.stop：阻止冒泡，同名事件不会向上级传递
<div @click="onDivcClick">
<p @click.stop="onClick"></p>
</div>
修饰符的链式调用，表明两个同时阻止
<p @click.stop.prevent="onClick"></p>
双向绑定指令修饰符
v-model双向绑定指令：可以快速设置或获取表单控件的值，比如：输入框、文本域、下拉菜单、单选框、复选框。用在不同的表单控件上，v-model都能正确设置或获取相应的值，但内部采取的方式和关联的属性有所不同。
输入框
v-model.trim="数据"：把输入框值的首尾空格去掉再同步给数据
<input type="text" v-model.trim="goods.name"/>
v-model.number="数据"：尝试把输入框的值转成数字再同步给数据
<input type="text" v-model.number="goods.name"/>
v-model.lazy="数据"，当失焦的时候再同步给数据，而不是实时同步
<input type="text" v-model.lazy="goods.name"/>
表单域
如下代码，可以将表单数据textarea的输入，赋值给intro变量
<template>
<div><textarea v-model="intro" cols="30" rows="4" placeholder="请输入自我介绍"></textarea><br/><br/></div>
</template><script setup>import { ref } from 'vue'const intro = ref('')const city = ref('')
</script>下拉框
v-model收集下拉列表的值，v-model写在select上，关联的是选中的option的value
如下，选中哪个选项，会将其value值赋给city，如果设置city默认值（value），则会默认选择对应选项
<template>
<div><select v-model="city"><option value="上海">上海</option><option value="北京">北京</option><option value="广州">广州</option> <option value="深圳">深圳</option></select>
</div>
</template><script setup>import { ref } from 'vue'const intro = ref('')const city = ref('')
</script>单选按钮
将选中的选项value值赋给sex，若要默认勾选，则设置sex默认值为对应value值就可以了
<template>
<div><input type="radio" value="male" v-model="sex"/>Male<input type="radio" value="female" v-model="sex"/>Female
</div>
</template><script setup>import { ref } from 'vue'const sex= ref('')</script>复选框
- 只有一个复选框：v-model绑定布尔值，关联的是复选框的checked属性
- 有多个复选框：v-model绑定数组，关联的复选框的value属性，手动给复选框添加value属性
只有一个复选框的时候：
<template>
<div>
<input type="checkbox" v-model="isVisible"/>是否同意用户协议
</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>
多个复选框的时候：
使用数组接收已经勾选的选项的value值，如果要使用默认勾选几个选项，就把要勾选的选项的value值存在数组里
<template>
<div>
<input type="checkbox" value="LQ" v-model="hobby">篮球
<input type="checkbox" value="PingPang" v-model="hobby">乒乓球
<input type="checkbox" value="Tennis" v-model="hobby">网球
</div>
</template>
<script setup>
import { ref } from 'vue'
const hobby = ref([])
</script>
样式绑定
为了便于程序员给元素动态的设置样式，Vue扩展了v-bind语法，允许我们通过绑定class或style属性，通过数据控制元素的样式。
分类
绑定class
静态class（也就是class前面没有：）和动态class可以共存，二者会合并
语法：
三元绑定
:class="条件？'类名1'：'类名2' "
对象绑定
:class="{ 类名1：条件1（成立条件，布尔值），类名2：条件2（成立条件，布尔值）……}"
三元绑定示例：
<template>
<div><p :class="isActive?'active': 'non_active'">Active</p>
</div>
</template><script setup>import { ref } from 'vue'const isActive=ref(true)
</script><style>.active{color: red;}.non_active{color:blue}
</style>对象绑定示例：
<template>
<div><p :class="{active:isActive}">Active</p>
</div>
</template><script setup>import { ref } from 'vue'const isActive=ref(true)
</script><style>.active{color: red;}
</style>绑定style
语法
:style="{CSS属性名:表达式1，CSS属性名:表达式2……}"
使用示例
<template>
<div><p :style="{color:colorStr}">绑定style</p>
</div>
</template><script setup>import { ref } from 'vue'const colorStr= ref('red')
</script>也可以将属性对应属性值放到一个响应式样式对象里，在将这个对象绑定到style
<template>
<div><p :style="styleObj">绑定style对象</p>
</div>
</template><script setup>import { reactive } from 'vue'const styleObj= reactive({color:'blue',backgroundColor:'yellow'})
</script>tab页切换示例
<template><ul><li v-for="item,index in tabs" :key="item.id"><a href="#" :class="{active:index===activeTabId}" @click="activeTabId=index">{{item.name}}</a></li></ul>
</template><script setup>import { ref } from 'vue'const tabs=[{id:1,name:'京东秒杀'},{id:2,name:'每日特价'},{id:3,name:'品类秒杀'}]const activeTabId=ref(0)
</script><style >*{margin: 0;padding: 0;}ul{display: flex;list-style: none;border-bottom: 2px solid #e01222;padding : 0 10px;}ul li{width: 100px;height: 50px;line-height: 50px;text-align: center;}ul li a{display: block;text-decoration: none;color: #333;font-weight: bold;}ul li a.active{background: #e01222;color: #fff;}
</style>