<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
#tab{
width:500px;
margin:100px auto;
}
p{
position: relative;
text-align: right;
}
ul{
list-style: none;
}
ul li{
position: relative;
margin-bottom:20px;
}
span{
position: absolute;
right:0;
padding:4px 6px;
background: red;
color:#fff;
font-size:9px;
border-radius: 6px;
cursor: pointer;
}
.choise{
color:#999;
text-decoration:line-through;
}
</style>
<body>
<div id="tab">
<input type="text" v-model='msg' @keyup.enter='add(msg)' />
<p v-show="list.length?false:true">{{mark}}</p>
<ul>
<li :class='{choise:ch[index]}'
v-for="(item, index) in list"
:key="index">
<input type="checkbox" v-model="ch[index]" />
{{item}}
<span @click='dele(index)'>删除</span>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#tab',
data: {
mark: "暂无内容",
msg:"请输入",
list:[],
ch:[],
c:false,
},
methods: {
add:function(val){
console.log(val);
if(val){
this.list.push(val);
this.ch.push(false)
console.log(this.ch)
}
this.msg='';
},
dele:function(val){
this.list.splice(val,1);
}
}
})
</script>
</html>
网友评论