待办事项:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#addItem{
font-size: 28px;
vertical-align: middle;
}
#txt{
height: 30px;
width: 250px;
vertical-align: middle;
}
li{
list-style: none;
width: 400px;
height: 70px;
line-height: 70px;
border: 1px solid lightgreen;
}
li:hover{
background: lightcoral;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<input id="txt" type="text"><button id="addItem" v-on:click='createList'>+</button>
<ul>
<li v-for='(item,index) in list'>{{item.value}}
<span v-if='item.sure' style="color:red;font-size: 18px">Be Sure</span>
<button v-on:click="delItem(index)">Del</button>
<button v-if='!item.sure' v-on:click='item.sure=true'>Sure</button>
</li>
</ul>
</div>
<script>
let add = new Vue({
el: '#box',data: {
list: []
},methods: {
createList() {
this.list.push({
value: txt.value,sure: false
});
},delItem(num){
this.list.splice(num,1);
}
}
});
</script>
</body>
</html>
table选项卡:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li {
list-style: none;
text-align: center;
}
#box {
width: 280px;
margin: 50px auto;
background: lightblue;
}
#box:after {
content: '';
height: 0;
clear: both;
visibility: hidden;
display: block;
}
#title li {
width: 50px;
height: 30px;
float: left;
padding: 20px 15px;
}
#title li:hover {
background: lightcoral;
}
#content {
display: block;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<ul id="title">
<li v-for='(item,index) in list' v-on:click='changeContent(index)'>{{index}}</li>
</ul>
<ul id="content">
<li v-for='(item,index) in list[str]'>{{item}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#box',data: {
list: {
'movie': ['aaa','bbb','ccc','ddd','aaa','ddd'
],'game': ['eee','fff','ggg','hhh','eee','hhh'
],'music': ['iii','jjj','kkk','lll','mmm','iii','mmm'
]
},str: ''
},methods: {
changeContent(data) {
this.str = data;
}
}
});
</script>
</body>
</html>