html点击添加列表,vue实现列表的添加点击

本文实例为大家分享了vue实现列表的添加点击，供大家参考，具体内容如下

使用指令：v-on v-for v-on v-bind v-model

html

vue.js

body {font-family: "\5FAE\8F6F\96C5\9ED1"}

.red {color: red;}

body > div {

width: 200px;

margin: 50px auto;

}

vue——列表的添加

• v-bind:class="{red:item.isFinish}" v-on:click="liClick(item)">

js

window.onload = function() {

Vue.component("todo-item", {

props: ["todo"],

template: "

{{todo.text}}"

})

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 = '';

}

}

});

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网