v-show:
带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS property display
例如:<el-button type="primary" @click="submitForm('ruleForm')" v-show="true">提交</el-button>
v-if:
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
当和 v-if
一起使用时,v-for
的优先级比 v-if
更高。
例:<el-button type="primary" @click="submitForm('ruleForm')" v-if="flag===true">提交</el-button>
v-else | v-else-if:
<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>
v-for:
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression
,为当前遍历的元素提供别名
例:<div v-for="item in items"> {{ item.text }} </div>
<div v-for="(item, index) in items"></div>
v-on:
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
缩写:@
预期:Function | Inline Statement | Object
参数:event
修饰符:
.stop
- 调用 event.stopPropagation(),阻止事件冒泡
。
.prevent
- 调用 event.preventDefault(),阻止原生事件的发生
。
.capture
- 添加事件侦听器时使用 capture 模式。
.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。
.native
- 监听组件根元素的原生事件。
v-bind:
动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。
缩写::
预期:any (with argument) | Object (without argument)
参数:attrOrProp (optional)
修饰符:
.prop
- 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里?)
例:<img v-bind:src="imageSrc"> <img :src="imageSrc">
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
v-model:
在表单控件或者组件上创建双向绑定。
限制:<input> <select> <textarea>
components
修饰符:
.lazy
- 取代 input
监听 change
事件
.number
- 输入字符串转为有效的数字
.trim
- 输入首尾空格过滤
例:<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<div id="example-5">
<select v-model="selected"> <
option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select> <span>
Selected: {{ selected }}</span>
</div>