Vue2 指令
Vue About 2,779 words指令
- 内容渲染指令
v-text
(会覆盖内容节点中原有的内容){{ }}
(只能用在元素的内容节点中,不能用在属性节点中)v-html
- 属性绑定指令
v-bind:
(可以简写为:
)
- 事件绑定指令
v-on:
(可以简写为@
)- 事件修饰符(
@click
).prevent
:阻止默认行为.stop
:阻止事件冒泡.capture
:以捕获模式触发当前的事件.once
:绑定的事件只触发1
次.self
:只有在event.target
是当前元素自身时触发事件
- 按键修饰符(
@keyup
).enter
:响应Enter
键.esc
:响应Esc
键
- 双向绑定指令
v-model
适用的标签input
type="radio"
type="checkbox"
textarea
select
v-model
指令修饰符.number
:将数值字符串转为数值类型(如果首次输入的是非数值类型,则无法转换;如果首次输入的是数字类型之后输入的是非数值类型,则会去掉非数值部分).trim
:过滤首尾空白.lazy
:在change
时更新,而非输入时。(当input
失去焦点时,才同步model
)
- 条件渲染指令
v-if
:创建和移除元素来控制显示隐藏(默认不需要展示,之后可能也不需要展示,使用场景更佳)v-show
:添加或移除display:none
样式来控制显示隐藏(频繁切换,v-show
性能更好)v-else-if
:配合v-if
、v-else
使用,使用较少v-else
:配合v-if
使用
- 列表渲染指令
v-for
:配合:key
使用。key
只能使用字符串或数值类型,不能使用对象或布尔类型,key
值不允许重复。
内容渲染
<p v-text="username"></p>
<p>{{ gender }}</p>
<p v-html="address"></p>
属性绑定
<input v-bind:placeholder="placeholderText">
<!-- v-bind: 简写为 : -->
<input :placeholder="placeholderText">
<img v-bind:src="imgSrc">
<img :src="imgSrc">
事件绑定
绑定事件时可以通过()
传递参数。
<!-- Vue 提供内置变量,名字叫 $event 它是原生 DOM 事件对象 -->
<button v-on:click="add(1, $event)">add</button>
<!-- 默认不带参数,在 add2 形参上也可以接收 event 事件 -->
<button @click="add2">add2</button>
事件修饰符
<!-- @click.prevent 阻止默认事件,等同于 e.preventDefault() -->
<a href="http://www.baidu.com" @click.prevent="show">跳转</a>
<!-- @click.stop 阻止事件冒泡,等同于 e.stopPropagation() -->
<div @click="divClick" style="background-color: aqua;height: 50px">
<button @click.stop="btnClick" style="margin: 10px">btn</button>
</div>
按键修饰符
<input type="text" @keyup="typing">
<input type="text" @keyup.enter="submit" @keyup.esc="clearText">
双向绑定
<input type="text" v-model="username">
<select v-model="address">
<option value="0">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
指令修饰符
<input type="text" v-model.number="age">
<input type="text" v-model.trim="username">
<input type="text" v-model.lazy="username">
条件渲染
<div v-if="flag">v-if</div>
<div v-show="flag">v-show</div>
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
列表渲染
<ul>
<li v-for="item in list">{{ item.id }} - {{ item.name }}</li>
</ul>
<ul>
<li v-for="(item, index) in list" :key="item.id" :title="item.name + index">{{ index }} - {{ item.id }} - {{ item.name }}</li>
</ul>
Views: 1,123 · Posted: 2022-12-21
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...