vue实现列表的添加点击
时间：2022-07-31 09:19:01|栏目：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 = '';
}
}
});
}
栏 目：vue
下一篇：vue cli2 和 cli3去掉eslint检查器报错的解决
本文标题：vue实现列表的添加点击
本文地址：http://www.codeinn.net/misctech/209437.html
