Vue视图下

3 Vue视图

3.5 样式绑定

class绑定

<p :class='对象'>
<p :class="数组">
<p :class="{类名:true/false, 类名:true/false}">

style绑定

<p :style="{color:'值', background:'值'}">
<p :style="[{}, {}, {}]">

3.6 事件

事件绑定

<p @事件名="方法">
<p v-on:事件名="方法">
方法加 () 的问题
<p @事件名="方法(1,1,2,3,$event)">

事件修饰符

.stop       阻止事件冒泡
.prevent    阻止默认动作
.capture    捕获阶段触发事件
.once       只绑定一次
.self       只有本身才触发
.passive    优化移动端的scroll事件

<p @click.stop="">
<p @click.stop.prevent="">

键盘修饰符

所有按键
.数字 (ascii )

特殊按键
.enter
.space
.tab
.up
.left
.right
.down
.delete

系统按键修饰符
.ctrl
.alt
.shift
.meta
<input @keyup.ctrl.enter>  按住ctrl再按回车

3.7表单

文本
input:text textarea   v-model

checkbox 单个  true-value  false-value
true/false

checkbox 多个
数组

单选按钮  input:redio   v-model  value值

select选择框   option的value值     多选 multiple, 数组

与对象中的属性双向链接
<input v-model="formData.username">
<input v-model="formData.pwd">

表单修饰符
v-model.trim
v-model.number  把值转为 number 类型
v-model.lazy