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

<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>