vue实现列表的添加点击
程序员文章站
2022-06-03 08:18:52
本文实例为大家分享了vue实现列表的添加点击，供大家参考，具体内容如下
使用指令：v-on v-for v-on v-bind v-model
html...
本文实例为大家分享了vue实现列表的添加点击，供大家参考，具体内容如下
使用指令：v-on v-for v-on v-bind v-model
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue.js</title>
<style>
body {font-family: "\5fae\8f6f\96c5\9ed1"}
.red {color: red;}
body > div {
width: 200px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="app">
<h3>vue——列表的添加</h3>
<input type="text" v-model="newitem" v-on:keyup.enter="clickkey">
<ul>
<li v-for="item in items" v-text="item.event"
v-bind:class="{red:item.isfinish}" v-on:click="liclick(item)"></li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="testvue.js"></script>
</body>
</html>
js
window.onload = function() {
vue.component("todo-item", {
props: ["todo"],
template: "<li>{{todo.text}}</li>"
})
var app = new vue({
el: '#app',
data: {
items: [
],
newitem: ''
},
methods: {
liclick: function (item) {
item.isfinish = !item.isfinish;
},
clickkey: function () {
this.items.push({
event: this.newitem,
isfinish: false
})
this.newitem = '';
}
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 每天腾出3分钟做这事就能长寿