vue基础

<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

　　数据驱动组件式开发