Vue选项卡

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
            }
        }
    })