vue实现列表的添加点击

2019-11-19 18:12:51

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

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

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

上一篇：JavaScript仿支付宝6位数字密码输入框

下一篇：详解javascript表单的Ajax提交插件的使用