指令补充：指令修饰符 、v-bind对于样式操作的增强 、v-m
2024-03-19 本文已影响0人
家乡的蝈蝈
1.1 指令修饰符
通过 "." 指明一些指令后缀，不同后缀封装了不同的处理操作 → 简化代码
① 按键修饰符
@keyup.enter → 键盘回车监听
② v-model修饰符
v-model.trim → 去除首尾空格
v-model.number → 转数字
③ 事件修饰符
@事件名.stop → 阻止冒泡
@事件名.prevent → 阻止默认行为
1.1.1 按键修饰符
<div id="app">
<h3>监听键盘事件</h3>
<!--
1.按键修饰符只能用于键盘事件，keyup和keydown
2.语法 @keyup.enter="" 表示按回车键才会执行操作
3.语法 @keyup.esc="" 表示按esc键才会执行操作
4.语法 @keyup.49 表示按keyCode值为49的键才会执行操作。这里的49表示键盘的keyCode值
-->
<input type="text" @keyup.enter="fn">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js" ></script>
<script>
const app = new Vue({
el: '#app',
methods: {
fn() {
console.log("事件触发了")
}
}
})
</script>
1.1.2 v-model修饰符
<div id="app">
<!--
<input v-model.trim="xx"> 去除两边的空白
<input v-model.number="xx"> 转换输入框的字符为number类型（填数字才有效）
<input v-model.lazy="xx"> 输入框change时，才更新数据（当输入框焦点改变时，才更新数据）
-->
<h3>v-model修饰符 .trim .number .lazy</h3>
姓名：<input type="text" v-model.trim="uname"><br>
年纪：<input type="text" v-model.number="age"><br>
手机：<input type="text" v-model.lazy="phone"><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
uname: '',
age: 23,
phone: ''
}
})
</script>
1.1.2 事件修饰符
<div id="app">
<h3> @事件名.stop → 阻止冒泡</h3>
<div class="father" @click="fn">
<div class="son" @click.stop="fn2">儿子</div>
</div>
<h3>@事件名.prevent → 阻止默认行为</h3>
<a href="http://www.baidu.com" @click.prevent=''>阻止默认行为</a>
</div>
<script src="./js/vue-2.7.14.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
fn() {
console.log(11111)
},
fn2() {
console.log(77777)
}
}
})
</script>
1.2 v-bind对于样式操作的增强
1.2.1 操作class
语法 :class = "对象/数组"
① 对象 : 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类
适用场景：一个类名，来回切换
② 数组 : 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
适用场景：批量添加或删除类
<div id="app">
<div class="box" :class="{box:true,pink:true,big:true}">xxxxxx</div>
<div class="box" :class="['box','pink','big']">xxxxxx</div>
</div>
案例-tab栏切换
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="item.id" @click="current = index">
<a :class="{active:index === current}" href="#">{{item.name}}</a>
</li>
</ul>
</div>
<script src="./js/vue-2.7.14.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
current: 0, //控制当前哪个元素高亮
list: [
{ id: 1, name: '京东秒杀' },
{ id: 2, name: '每日特价' },
{ id: 3, name: '品类秒杀' }
]
}
})
</script>
1.2.2 操作style
语法 :style = "样式对象"
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
适用场景：某个具体属性的动态设置
<div id="app">
// background-color用驼峰或字符串才能作为键
<div class="box" v-bind:style="{width:'100px',backgroundColor:'pink','background-color':'red'}"></div>
</div>
案例：进度条
<div class="progress">
<div class="inner" :style="{width:percent + '%'}">
<span>{{percent}}%</span>
</div>
</div>
<button @click="percent = 25">设置25%</button>
<button @click="percent = 50">设置50%</button>
<button @click="percent = 75">设置75%</button>
<button @click="percent = 100">设置100%</button>
</div>
<script src="./js/vue-2.7.14.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
percent: 0
}
})
</script>
1.1 v-model应用于其他表单元素
常见的表单元素都可以用 v-model 绑定关联，快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value
...
案例：其他表单元素
<body>
<div id="app">
<!--
v-model 可以让数据和视图，形成双向数据绑定
(1) 数据变化，视图自动更新
(2) 视图变化，数据自动更新
可以快速[获取] 或 [设置]表单元素的内容
-->
姓名：<input type="text" v-model="uname" /><br />
性别：
<!-- 1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性，用于提交给后台的数据
结合 Vue 使用 → v-model -->
<input type="radio" name="sex" value="男" v-model="xingbie" />男生
<input type="radio" name="sex" value="女" v-model="xingbie" />女生<br />
爱好：
<!-- 2. select 的 value 值，关联了选中的 option 的 value 值 -->
<input type="checkbox" name="hobby" value="吃" v-model="aiHao" />吃饭
<input type="checkbox" name="hobby" value="睡" v-model="aiHao" />睡觉
<input type="checkbox" name="hobby" value="玩" v-model="aiHao" />打豆豆<br />
籍贯：
<!-- 1. option 需要设置 value 值，提交给后台 -->
<select v-model="diQu">
<option value="南阳">南阳市</option>
<option value="杭州">杭州市</option>
<option value="郑州">郑州市</option>
</select><br />
记住我：<input type="checkbox" v-model="jiZhuWo" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
uname: 'xx',
xingbie: '女',
diQu: '杭州',
jiZhuWo: true,
aiHao: ['吃', '玩']
}
})
</script>
</body>
