利用vue实现的一些小案例

妖狐艹你老母 2022-05-18 01:07 189阅读 0赞

1、利用hash过滤数据

核心代码：

js代码：

html:

<a href="#red" :class="{active:isShow==='red'}">显示红色字体</a>
        <a href="#yellow" :class="{active:isShow==='yellow'}">显示黄色色字体</a>
        <a href="#black" :class="{active:isShow==='black'}">显示黑色字体</a>

2、在输入框中输入内容后按enter键添加到列表：

在这个小案例中：最主要的是利用好v-model（双向数据绑定）的技巧，在data中用val专门存放输入框中的内容

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>添加到列表</title>
        <script src="../vue.js"></script>
        <style>
            #app{width:100%; padding:20px;}
            ul,li{padding:0; margin:0;}
            input{width:200px; height:30px; padding-left:10px;}
            .list{list-style:none; }
            .list li{width:300px; height:40px; line-height:40px; border-bottom:1px solid #af5b5e;}
            .list li span{float:left;}
            .list li em{float:right;}
    
        </style>
    </head>
    <body>
    <div id="app">
        <input type="text" placeholder="按enter键可添加列表内容"
               @keydown.enter="enterFn"
               v-model="val"
        />
        <ul class="list">
            <li v-for="item in dataList"><span>{
       {item.title}}</span><em>{
       {item.date}}</em></li>
        </ul>
    </div>
    <script>
        var Date = new Date()
        var vm = new Vue({
            el:'#app',
            data:{
                dataList:[],
                val:''
            },
            methods:{
               enterFn(){
    
                   this.dataList.push({
                       title:this.val,
                       date:`${Date.getFullYear()}-${getTwo(Date.getMonth()+1)}-${getTwo(Date.getDate())}`
                   })
                   this.val=''
               }
            }
        })
        function getTwo(n){
         return   n<10?'0'+n:''+n
        }
    </script>
    </body>
    </html>

3、实现多选框

这个不难，布局布好了，就简单

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../vue.js"></script>
        <style>
            .box {
                margin: 100px auto 0;
                width: 80%;
            }
            .clear:after {
                content: '';
                display: block;
                clear: both;
            }
            .checkbox {
                margin: 0;
                padding: 0;
                display: inline-block;
                list-style: none;
            }
            .checkbox .item {
                float: left;
                position: relative;
                padding: 12px 20px 12px 30px;
                cursor: pointer;
                transition: .2s all;
            }
            .checkbox .item:before {
                position: absolute;
                left: 10px;
                top: 16px;
                /*display: inline-block;*/
                border: 1px solid #333;
                width: 12px;
                height: 12px;
                content: '';
                transition: .2s all;
            }
            .checkbox .item.checked, .checkbox .item:hover {
                 color: #409eff;
             }
            .checkbox .item.checked:before {
                border-color: #409eff;
                background: #409eff;
                content: '\2713';
                /*content:'\e605';*/
                color: #fff;
                font-size: 12px;
                text-align: center;
                line-height: 12px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    
        <div class="box">
    
            <ul class="checkbox clear">
                <li
                        class="item"
                        v-for="item in dataList"
                        @click="selectHandle(item)"
                        :class="{checked:!item.isSelect}"
                >{
       {item.name}}</li>
            </ul>
    
        </div>
    <script>
        var vm = new Vue({
            el:'.box',
            data:{
                dataList:[
                    {
                        name:'胡歌',
                        isSelect:true
                    },
                    {
                        name:'陈默',
                        isSelect:true
                    },
                    {
                        name:'陶亚东',
                        isSelect:true
                    },{
                        name:'刘诗诗',
                        isSelect:true
                    },
                    {
                        name:'董卿',
                        isSelect:true
                    },
                    {
                        name:'王昱珩',
                        isSelect:true
                    }]
            },
            methods:{
                selectHandle(item){
                    item.isSelect = !item.isSelect
                }
            }
        })
    </script>
    </body>
    </html>

还有一种方法也可以实现多选（css代码和上面的一样哦）

<div class="box">
    
        <ul class="checkbox clear">
            <li
                    class="item"
                    v-for="item,index in dataList"
                    @click="selectHandle(item)"
                    :class="{checked:n.includes(item)}"
            >{
       {item}}</li>
        </ul>
    
    </div>
    <script>
        var vm = new Vue({
            el:'.box',
            data: {
                dataList: ['胡歌','陈默','陶亚东','王昱珩'],
                n:[]
            },
            methods:{
                selectHandle(item){
                    if(this.n.includes(item)){
                        this.n = this.n.filter(data=>data!=item)
                    }else{
                        this.n.push(item)
                    }
    
                }
            }
        })
    </script>