vue打卡-选项卡制作

• 制作要点
  可控制class

  • v-bind:class="{class名字：表达式}"
    表达式为true就添加样式，为false则忽略

  • 控制style
    v-bind:style="{样式名：样式值}"

  • vue事件
    语法： v-on:事件名='事件处理函数'

    传参
    语法：　v-on:事件名='事件处理函数(参数)'

效果图

2019-05-19 20-57-35 的屏幕截图.png 2019-05-19 20-57-41 的屏幕截图.png 2019-05-19 20-57-45 的屏幕截图.png

<div id = "app">
    <input type="button"
    v-for="item,i in tabHandle"
    v-bind:value="item.title"
    v-bind:class="{inputStyle: i=== index}"
    v-on:click="change(i)"
    >
    <div
    v-for="item, j in tabHandle"
    v-bind:style="{display:j===index?'block':'none'}"
    >
    <p
    v-for="inputItem in item.list"
    > {{inputItem.subTitle}}</p>
    </div>
</div>

  let tabHandle = [
        {
            title:"模块一",
            list:[
                {
                    subTitle:"数据一"
                },
                {
                    subTitle:"数据二"
                },
                {
                    subTitle:"数据三"
                }

            ]
        }, {
            title:"模块二",
            list:[
                {
                    subTitle:"数据四"
                },
                {
                    subTitle:"数据五"
                },
                {
                    subTitle:"数据六"
                }

            ]
        }, {
            title:"模块三",
            list:[
                {
                    subTitle:"数据七"
                },
                {
                    subTitle:"数据八"
                },
                {
                    subTitle:"数据九"
                }

            ]
        },
    ];
    let vm = new Vue({
        el:"#app",
        data:{
            tabHandle:tabHandle,
            index:0
        },
        methods:{
            change(i){
                this.index = i;
            }
        }
    })