待办事项：
<!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;
250px;
vertical-align: middle;
}
li{
list-style: none;
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 {
280px;
margin: 50px auto;
background: lightblue;
}
#box:after {
content: '';
height: 0;
clear: both;
visibility: hidden;
display: block;
}
#title li {
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', 'bbb', 'ccc', 'ddd', 'aaa', 'bbb', 'ccc',
'ddd', 'aaa', 'bbb', 'ccc', 'ddd'
],
'game': ['eee', 'fff', 'ggg', 'hhh', 'eee', 'fff', 'ggg', 'hhh', 'eee', 'fff', 'ggg',
'hhh', 'eee', 'fff', 'ggg', 'hhh', 'eee', 'fff', 'ggg', 'hhh'
],
'music': ['iii', 'jjj', 'kkk', 'lll', 'mmm', 'iii', 'jjj', 'kkk', 'lll', 'mmm', 'iii',
'jjj', 'kkk', 'lll', 'mmm', 'iii', 'jjj', 'kkk', 'lll', 'mmm', 'iii', 'jjj',
'kkk', 'lll', 'mmm'
]
},
str: ''
},
methods: {
changeContent(data) {
this.str = data;
}
}
});
</script>
</body>
</html>