<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小黑记事本</title>
<style>
</style>
</head>
<body>
<header></header>
<section id="content">
<input type="text" autofocus="autofocus" placeholder='输入你要记录的事情' v-model='inputvalue' @keyup.enter='add' />
<ul>
<li v-for='(item,index) in list'>{{item}}<button @click='decline(index)'> x</button></li>
</ul>
<button id="clear" @click='clearall'>删除所有记事</button>
</section>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var maintext = new Vue({
el: '#content',
data: {
maintext: '666',
list: ['吃饭', '睡觉', '写代码'],
inputvalue: ''
},
methods: {
add: function() {
this.list.push(this.inputvalue)
},
decline: function(index) {
var ul = document.getElementsByTagName('ul')
var li = document.getElementsByTagName('li')
//console.log(li + ul);
li.ul.removeChild(li)
// this.list.splice(index, 1)
},
clearall: function() {
this.list = null
document.querySelector('#clear').innerHTML = ''
}
}
})
</script>
</body>
</html>
京公网安备 11011402011233号