指令补充
指令修饰符
通过.
指明一些指令后缀,不同的后最封装了不同的处理操作 简化代码
① 按键修饰符
@keyup.enter
→ 键盘回车监听
② v-model修饰符
v-model.trim
→ 去除首尾空格
v-model.number
→ 转数字
③ 事件修饰符
@事件名.stop
→ 阻止冒泡
@事件名.prevent
→ 阻止默认行为
例:@keyup.enter
回车触发 fn 函数
<input @keyup.enter="fn" v-model="username" type="text">
例:四个修饰符的用法:.trim
.number
.stop
.prevent
<div id="app">
<h3>v-model修饰符 .trim .number</h3>
姓名:<input v-model.trim="username" type="text"><br>
年纪:<input v-model.number="age" type="text"><br>
<h3>@事件名.stop → 阻止冒泡</h3>
<div @click="fatherFn" class="father">
<div @click.stop="sonFn" class="son">儿子</div>
</div>
<h3>@事件名.prevent → 阻止默认行为</h3>
<a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
age: '',
},
methods: {
fatherFn() {
alert('老父亲被点击了')
},
sonFn() {
alert('儿子被点击了')
}
}
})
</script>
v-bind对于样式操作的增强
语法:class="对象/数据"
1、对象 键就是类名,值是布尔值。如果值为 true,有这个类,否则没有这个类
<div class="box":class="{类名1: 布尔值,类名2: 布尔值}"></div>
适用场景:一个类名来回切换
2、数组 数组中所有的类,都会添加到盒子上,本质就是一个 class 列表
<div class="box":class="[类名1,类名2,类名3]"></div>
适用场景:批量添加或删除类
例:
<div id="app">
<div class="box" :class=" {pink:true,big:false}">黑马程序员</div>
<div class="box" :class="['pink','big']">黑马程序员</div>
</div>
v-bind对于样式style的控制
语法 :style = "样式对象"
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
适用场景:某个具体属性的动态设置
例:
<div class="box" :style="{width:'',height:'',backgroundColor:'pink'}"></div>
v-model 应用于其他表单元素
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text
→ value
文本域 textarea
→ checked
复选框 input:checkbox
→ value
单选框 input:radio
→ value
下拉菜单 select
→ checked
例:
<div id="app">
<h3>小黑学习网</h3>
姓名:
<input type="text" v-model="username">
<br><br>
是否单身:
<input type="checkbox" v-model="isSingle">
<br><br>
<!--
前置理解:
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性,用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input v-model="gender" type="radio" name="gender" value="1" v-model="">男
<input v-model="gender" type="radio" name="gender" value="2" v-model="">女
<br><br>
<!--
前置理解:
1. option 需要设置 value 值,提交给后台
2. select 的 value 值,关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select v-model="cityId">
<option v-model="" value="101">北京</option>
<option v-model="" value="102">上海</option>
<option v-model="" value="103">成都</option>
<option v-model="" value="104">南京</option>
</select>
<br><br>
自我描述:
<textarea v-model="desc"></textarea>
<button>立即注册</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
isSingle: true,
gender: '1',
cityId: '101',
desc: '',
}
})
</script>