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