@keyup v-model v-show v-for @click 指令的小栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栗子记事本</title>
</head>
<body>
<div id="app" style="text-align: center;width: 200px;background: aliceblue;overflow:hidden;">
<h3>记事本</h3>
<input v-model="message" @keyup.enter="add" type="text" placeholder="请输入内容">
<div v-show="arr.length > 0">
<ol>
<li v-for="item in arr">{{ item }}
<hr></li>
</ol>
<p style="float: left;margin-left: 10px">{{ arr.length }} items </p>
<p @click="clear" style="float: right;margin-right: 10px">clear</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
arr:[],
},
methods: {
add: function (){
if (this.message.length>0){
this.arr.push(this.message)
}
},
clear: function (){
this.arr.splice(0,this.arr.length);
}
}
});
</script>
</body>
</html>
我是分割线
栗子记事本
记事本
- {{ item }}
{{ arr.length }} items
clear