本文主要是介绍Vue(3)——指令修饰符，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
指令修饰符
通过“.”知名一些指令后缀，不同后缀封装了不同的处理操作。
- 按键修饰符：@keyup.enter :键盘回车监听
- v-model修饰符： v-model.trim 去除首尾空格 v-model.number 转数字
- 事件修饰符： @事件名.stop 阻止冒泡 @事件名.prevent 阻止默认行为
v-bind对于样式控制的增强
操作class
语法：:class="对象/数组" 如果为true,有这个类，否则没有这个类
<div class="box" :class="{类名1:布尔值,类名2:布尔值}"></div>
数组中的所有类，都会添加到盒子上，本质就是一个class列表
<div class="box" :class="[类名1,类名2:]"></div>
<style>
.box {
width: 200px;
height: 200px;
border: 3px solid #000;
font-size: 30px;
margin-top: 10px;
}
.pink {
background-color: pink;
}
.big {
width: 300px;
height: 300px;
}
</style>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<div id="app">
<div class="box" :class="{pink:true,big:true}">小猫怎么叫</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
操作style
语法：style = "样式对象"
<div class="box" :style="{css属性名1:css属性值,}css属性名2:css属性值"></div>
<div id="app">
<div class="box" :style="{width:'800px',height:'800px'}"></div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
}
})
注：如果是带有横杆的属性名例如bgc需要加上单引号或驼峰命名法
'background-color'或backgroundColor
v-model应用于其他表单元素
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app"><h3>什么是快乐星球</h3>姓名：<input type="text" v-model="username"><br>是否单身：<input type="checkbox" v-model="si"><br>性别：<input v-model="sex" type="radio" name="sex" value="1">男<input v-model="sex" type="radio" name="sex" value="2">女<br><select v-model="city"><option value="101">北京</option><option value="102">东京</option><option value="103">西京</option><option value="104">普京</option></select><br>描述：<textarea v-model="desc"></textarea><br><button>注册</button></div><script>const app = new Vue({el: '#app',data: {username: '',si: false,sex: 1,city: '103',desc: " "}})</script>
</body>这篇关于Vue(3)——指令修饰符的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
