vue指令
指令 |
用法 |
|
v-if v-else-if v-else |
<div id="app"> <p v-if="show">显示这段文本</p> <p v-if="state==1">当state为1时显示该行</p> <p v-else-if="state==2">当state为2时显示该行</p>
<p v-else>否则显示该行</p> <template v-if="type=='a'"> <label name="a"></label> a:<input key="a-input"> </template> <template v-if="type=='b'"> <label name="b"></label> b:<input key="b-input"> </template> <button @click="typeclick">切换</button> </div> <script> var app = new Vue({ el: '#app', data: { show: true, //为false不显示 state: 1, type:'a' }, methods:{ typeclick:function(){ this.type=this.type=='a'?'b':'a'; } } }) </script> |
|
v-show |
与v-if用法相同,区别是这个是控制显示隐藏的,无法使用<template> |
v-bind:href |
<a v-bind:href="url">链接</a> <a :href="url">链接</a> <!--缩写为--> |
v-bind:src |
<img v-bind:src="imgurl"> <img :src="imgurl"> <!--缩写为--> <img :src="'/images/' + imgurl"> <!-- 内联字符串拼接 --> data: { url: "https://www.cnblogs.com/fanningwen/", imgurl: https://www.cnblogs.com/fanningwen/img.png } |
v-bind:class |
<div id="app"> <div class="state" :class="{ active: isActive ,'error':isError}"></div> <div :class="[classA, classB]"></div> <!--绑定数组,数组中也可以放三元运算--> <div :class="[classA, { active: isActive ,'error':isError}]"></div> <div :class="classes"></div> </div> <script> var app = new Vue({ el: '#app', data: { isActive: true, isError: false, classA: 'active', classB: 'error' }, computed: { classes: function() { return 'bin'; } } }) </script> |
v-bind:style |
<div :style="{ fontSize: size + 'px' }"></div> <div :style="styles"></div> data: { size: 16, styles: {color: 'red', fontSize: '16px'} } |
其它对象 |
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> data: { someProp:'idActive', otherProp:'otherProp' } |
v-for |
<ul id="app"> <li v-for="item in item1s">{{ item }}</li> <template v-for="item in items"> <!--in可以替换为of--> <li>{{ item.name }}</li> <li>{{ item.text }}</li> </template> <li v-for="(item,index) in items">{{index}}{{ item.name }}</li> <li v-for="(item,key,index) in item1s">{{index}}{{key}}{{ item }}</li> <!--迭代整数--> <li v-for="n in 10">{{n}}</li> </ul> <script> var app = new Vue({ el: '#app', data: { item1s:{name: '名字',text: '内容'}, items: [ {name: '名字1',text: '内容1'}, {name: '名字2',text: '内容2'}, ] } }) </script> |
v-on:click |
<div id="app"> <button v-on:click="counter++"></button> <button @click="counter++"></button>{{counter}} <!--缩写为--> <button @click="clickk('禁止点击',$event)"></button> </div> <script> var app = new Vue({ el: '#app', data: { counter: 0 }, methods: { clickk: function(message, event) { event.preventDefault() alert(message) } } }) </script> |
事件修饰符(按键修饰符在教程中看)
<a @click.stop="doThis"></a> |
阻止单击事件继续传播 |
<form @submit.prevent="onSubmit"></form> |
提交事件不再重载页面 |
<a @click.stop.prevent="doThat"></a> |
修饰符可以串联 |
<form @submit.prevent></form> |
只有修饰符 |
<div @click.capture="doThis">...</div> |
添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 |
<div @click.self="doThat">...</div> |
在该元素本身时触发,不包括子元素 |
<a v-on:click.once="doThis"></a> |
点击事件将只会触发一次 |
v-model |
<input v-model="message" placeholder="请输入"> <!--textarea同样生效--> <p>输入的内容是: {{ message }}</p> data: { message: "" } |
单选按钮 |
<label><input type="radio" value="One" v-model="picked">One</label> <label><input type="radio" value="Two" v-model="picked">Two</label> <span>选择的项是: {{ picked }}</span> data: { picked: "" } |
复选框 |
<label><input type="checkbox" value="Jack" v-model="checkedN">Jack</label> <label><input type="checkbox" value="John" v-model="checkedN">John</label> <label><input type="checkbox" value="Mike" v-model="checkedN">Mike</label> <span>选择的项是: {{ checkedNames }}</span> <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"> <!--选中时toggle为yes,否则为no(定义的属性选中什么是什么)--> data: { checkedNames: [] } |
选择框 |
<select v-model="selected" multiple> <!--不加multiple属性为单选--> <option>A</option> <option>B</option> </select> <span>选择的项是: {{ selected }}</span> data: { selected: [] //单选时[]变为"" } |
.lazy |
<input v-model.lazy="msg" > 不会实时改变了,在失焦或按回车时才会改变 |
.number |
<input v-model.number="age" type="number"> 会转换为数字类型 |
.trim |
<input v-model.trim="msg"> 过滤首尾空白字符 |
v-html |
<div v-html="html"></div> 插入HTML是使用 |
v-text |
<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> |
v-pre |
<span v-pre>{{这里不会被编译}}</span> 想输出{{}}即可使用 |
v-once |
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。 |