首页手记简单的vue选项卡

简单的vue选项卡

标签：

Html5 CSS3 Vue.js

今天来编写一个简单的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中的数据边可以了

最后附上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的vue选项卡</title>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/vue.js"></script>
    <style>
 *{
            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%;
 }
    </style>
</head>
<body>
<div class="vueSelect">
    <ol>
        <li v-for="(SelectOL,index) in vueSelectBase" v-on:click="vueClick(index)"  v-bind:class="SelectOL.vueSelecClassOL">{{SelectOL.vueSelectOL}} {{index}}</li>
    </ol>
    <ul>
        <li v-for="(SelectUL,index) in vueSelectBase" v-bind:class="SelectUL.vueSelecClassUL">{{SelectUL.vueSelectUL}}</li>
    </ul>
</div>
</body>
<script>
var vueSelect = new Vue({ //实例一个vue对象
 el:".vueSelect",       //el是指向选择器，当选择器为class类型时，只作用于第一个
 data:{                 //data是指向数据
 vueSelectBase:[
            {vueSelectOL:"vue选项一",vueSelecClassOL:"vueSelectOLTrue",vueSelecClassUL:"vueSelectULTrue",vueSelectUL:"vue内容一"},
 {vueSelectOL:"vue选项二",vueSelecClassOL:"",vueSelecClassUL:"",vueSelectUL:"vue内容二"},
 {vueSelectOL:"vue选项三",vueSelecClassOL:"",vueSelecClassUL:"",vueSelectUL:"vue内容三"},
 ]

    },
 methods:{               //methods是指向函数方法
 vueClick:function(index){
            let vueSelectNum = this.vueSelectBase.length;
 for(let i=0;i<vueSelectNum;i++){
                this.vueSelectBase[i].vueSelecClassOL = "";
 this.vueSelectBase[i].vueSelecClassUL = "";
 }
            this.vueSelectBase[index].vueSelecClassOL = "vueSelectOLTrue";
 this.vueSelectBase[index].vueSelecClassUL = "vueSelectULTrue";
 }
    }
});
</script>
</html>

点击查看更多内容