vue实现的点前当前Li添加背景色

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关键词分类</title>
    <script src='./vue.js'></script>
```
    <style>
        *{margin: 0 ;padding: 0;}
        ul li{
            list-style-type: none;
            height: 50px;
            line-height: 50px;
            margin: 10px 0;
            margin: 10px 0;
            padding-left: 20px;
            box-sizing: border-box;
        }
        .firstLi{
            background-color: lightblue;
        }
        span{
            margin-right: 20px;
        }
        button{
            float: right;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            background-color:white;
            color: lightcoral;
            border: none;
            text-align: center;
            margin-right: 20px;
            /* border: 1px solid  rgb(78, 197, 236); */
        }
        .actived{
            background-color:lightblue;
        }
        .activedBut{
            border: 1px solid  rgb(78, 197, 236);
            background-color:white;
            color:rgb(78, 197, 236);
        }
        .activedBut2{
            border: 1px solid lightcoral;
            background-color:white;
            color: lightcoral;
        }
        input{
            border:none;
            background-color: white;
        }
    </style>
```
</head>
<body>
    <div id="app">
        <ul> 
            <li class='firstLi'>不需要的关键词</li>
            <template  v-for='(item,index) of list'>
                <li :key='item.id' :class='{actived:currentIndex==index}'
                 @mouseover='selectStyle(index)'>
                   <input v-model="item.desc" readonly  disabled :class='{actived:currentIndex==index}'>
                    <button :class='{activedBut:currentIndex==index}' v-show='currentIndex == index' 
                      @click = 'addKeyWords(item.desc)'
                      > ✔</button> 
                </li>
         </template>   
        </ul>   
        <ul class='keyList'>
            <li class='firstLi'>需要的关键字</li>   
                <li v-for = "(item,index) of keyList" :key="index"
                @mouseover='KeyselectStyle(index)' :class='{actived:currentsIndex==index}'>
                    <input :value="item" readonly  disabled :class='{actived:currentsIndex==index}'>
                    <button class='{activedBut:currentsIndex==index}'  v-show='currentsIndex == index' 
                    @click = 'deletaKeyWords(item,index)'> ✖ </button> 
                </li>
        </ul> 
    </div>
    <script>
        var vue =  new Vue({
            el:'#app',
            data:{
                currentIndex: 0, //点击当前背景变成白色索引
                currentsIndex:0,
                actived:'',
                keyList:[],
                list:[{
                    id: '001',
                    desc: '酸'
                },{
                    id: '002',
                    desc: '苯'
                },{
                    id: '003',
                    desc: '乙酯'
                },{
                    id: '004',
                    desc: '锰'
                },{
                    id:'005',
                    desc: '二氧化碳'
                }],
            }, 
    methods: {
      selectStyle (index) {   
          //点击当前li变色
          this.currentIndex = index;
        },
        KeyselectStyle:function(index){
            this.currentsIndex = index;
        },
        //点击button添加到关键词
        addKeyWords:function(desc,index){
            this.keyList.push(desc); 
            this.list.splice(index,1)
        },
         //点击button删除关键词
         deletaKeyWords:function(item,index){
            this.keyList.splice(index,1); 
            this.list.push({'desc': item})
         }
    }
})
    </script>
</body>
</html>
 
posted @ 2020-07-18 09:50  北海以北深海未眠  阅读(635)  评论(0)    收藏  举报