<html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload = function(){ new Vue({ el: "#app", data: { cur: 0, tabtitil: ['标题一','标题二','标题三',], tabContent: ['a','b','c'], cur2: 1, } }) } </script> </head> <body> <div id="app"> <ul class="tab-tit"> <li @click="cur = 0" :class="{active:cur==0}">标题一</li> <li @click="cur = 1" :class="{active:cur==1}">标题二</li> <li @click="cur = 2" :class="{active:cur==2}">标题三</li> </ul> <ul class="tab-con"> <li v-show="cur==0">标题一</li> <li v-show="cur==1">标题二</li> <li v-show="cur==2">标题三</li> </ul> <ul class="tab-tit"> <li v-for="(v,i) in tabtitil" @click="cur2=i" :class="{active:cur2==i}">{{v}}</li> </ul> <ul> <li v-for="(v,i) in tabContent" v-show="cur2===i">{{v}}</li> </ul> </div> </body> <style> ul,li { padding: 0;margin: 0 } .tab-tit li { padding: 10px 15px; text-align: center; list-style: none; cursor: pointer; display: inline-block; } .tab-con li { padding: 10px 15px; text-align: center; list-style: none; cursor: pointer; display: inline-block; } </style> </html>
1.使用computed进行动他加载页面变化，相当于date属性
2.使用箭头函数 问题：this的指向问题 争对页面输入的值进行匹配
seartchFor:function(){
if(!this.input){
rethrn this.lists;
}
return this.lists.filter(item =>{
return this.name.includes(this.input);
})
}
jq操作 操作dom
数据驱动 组件式开发