指令修饰符
通过“.”知名一些指令后缀,不同后缀封装了不同的处理操作。
- 按键修饰符:@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>