vue指令
- v-model:双向绑定 在input、select、texteara、components中使用
- v-cloak 防止页面出现闪烁的问题 只针对差值表达式
- v-text 类似于差值表达式 单项绑定 不会解析html标签
- v-html 会解析html标签后输出
- v-pre 会跳过当前元素和其子元素的编译过程
- v-once 执行一次性插值
- v-on 绑定事件 缩写为 @click=“方法名” 或者 v-on:click="方法名"
事件修饰符
- ent.pareventDefault() 或者 event.stopPropagation() 阻止默认行为、阻止事件冒泡
//阻止单击事件继续执行 <a v-on:click.stop="do"></a> //提交事件不刷新页面 <form v-on:submit.prevent="onSubmit"></form> //阻止事件冒泡 <a v-on:click.stop.prevent="do"></a> //处理自身函数 <div v-on:click.self="do"></div>
按键修饰符
- <input v-on:keyup.enter = "submit">
- <input @keyup.enter = "submit">
自定义按键修饰符
Vue.config.keyCodes.自定义名 = 按键对应的ASCII
- v-bind:响应html属性
- <img v-bind:src="imageSrc">
- <img :src="imageSrc">
- 绑定class
- <ul v-bind:class="{textcolor:isColor}"></ul>
- <ul v-bind:class="[classA,classB]"></ul>
- 绑定style
- <ul v-bind:style="{color:red,margin:0 auto}"></ul>
- <ul v-bind:style="[styleObj1,styleObj2]"></ul>
- v-if
- <span v-if="flag"></span>
- v-else-if
- <span v-else-if="flag!=false"></span>
- v-else
- <span v-else></span>
- v-show 是否显示
- <span v-show="参数"><span>
- v-for 循环
- <ul v-for="(item,index) in 数据源" v-bind:key="item.id">
选项卡
<div id="app">
<ul class="title" >
<li v-for="(item,index) in title" v-bind:key="item.id" v-bind:class="currentIndex==index?'current':''" v-text="item.row" @click="change(index)"></li>
</ul>
<ul class="con">
<li v-for="(item,index) in datas" v-bind:key="item.id" v-show="currentIndex==index" v-text="item.row"></li>
</ul>
</div>
new Vue({
el:'#app',
data:{
currentIndex :0,
title:[{
id:1,
row:1,
},{
id:2,
row:2,
},{
id:3,
row:3,
},{
id:4,
row:4,
}],
datas:[{
id:1,
row:11111,
},{
id:2,
row:22222,
},{
id:3,
row:33333,
},{
id:4,
row:44444,
}],
},
methods:{
change(index){
console.log(index);
this.currentIndex=index
}
}
})