【Vue】指令扩充（指令修饰符、样式绑定）

目录

指令修饰符

按键修饰符

事件修饰符 

 双向绑定指令修饰符

输入框

表单域

下拉框

单选按钮

复选框

样式绑定 

分类

绑定class

绑定style

tab页切换示例

---

指令修饰符

作用

借助指令修饰符，可以让指令的功能更强大

分类

1. 按键修饰符：用来检测用户的按键，配合键盘事件使用，keydown和keyup
2. 事件修饰符：简化程序对于阻止冒泡、阻止默认行为的操作
3. 双向绑定指令修饰符：可以让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>

复选框

1. 只有一个复选框：v-model绑定布尔值，关联的是复选框的checked属性
2. 有多个复选框：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>