相思资源网 Design By www.200059.com
本文实例为大家分享了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="/UploadFiles/2021-04-02/vue.js">
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 = '';
}
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无vue实现列表的添加点击的评论...