<!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>
