简单的vue选项卡

今天来编写一个简单的vue选项卡

第一步先写结构

第二步设置css样式

第三步vue操作

在vue中通过双括号{{test}}，的方式显示数据

Vue中没有DOM操作，主要思路是以修改data数据后，通过v指令直接操作html。

1、首先是v-for指令（基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。该指令之值，必须使用特定的语法(item, index) in items,  为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令）

2、接下来是需要一个事件，让我们可以做到对ul的li的控制

这里使用 v-on 指令（动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。）

3、通过v-bind指令修改选中样式（动态地绑定一个或多个特性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute） 语法结构：v-bind:argument="expression"）

到了这里已经基本完成，最后只需要通过点击事件，去动态修改vueSelectbase中的数据边可以了

最后附上代码

    
    
    
    
 *{
            margin: 0;
 padding: 0;
 list-style: none;
 }
        .vueSelect>ol{
            height: 40px;
 background-color: #38ADFF;
 }
        .vueSelect>ol>li{
            float: left;
 line-height: 40px;
 padding: 0 10px;
 color: white;
 }
        .vueSelect>ol>.vueSelectOLTrue{
            background-color: #169BD5;
 }
        .vueSelect>ol>li:hover{
            background-color: #169BD5;
 }
        .vueSelect>ul{
            height: 200px;
 }
        .vueSelect>ul>.vueSelectULTrue{
            display: block;
 color: white;
 background-color: #2C5364;
 }
        .vueSelect>ul>li{
            display: none;
 height: 100%;
 }
    



    

        {{SelectOL.vueSelectOL}} {{index}}
    
    

        {{SelectUL.vueSelectUL}}