利用vue实现的一些小案例

最新推荐文章于 2023-05-30 15:46:53 发布

冰雪为融

最新推荐文章于 2023-05-30 15:46:53 发布

阅读量5.1k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/lhjuejiang/article/details/81238765

版权

vue 专栏收录该内容

81 篇文章 4 订阅

订阅专栏

1、利用hash过滤数据

核心代码：

js代码：

<script>
    var vm = new Vue({
        el:'#app',
        data:{
          isShow:'red'
        }
    });
    function hash(){
        var hash = window.location.hash.slice(1);
        vm.isShow = hash;
    }
    hash();
    window.addEventListener('hashchange',hash)//事件：hashchange
</script>

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>

冰雪为融

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
利用vue实现的一些小案例

1、利用hash过滤数据核心代码：js代码：&lt;script&gt; var vm = new Vue({ el:'#app', data:{ isShow:'red' } }); function hash(){ var hash = window.location.ha...
复制链接

扫一扫