vue实现列表的添加点击
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了vue实现列表的添加点击，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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 = '';
}
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。