vuejs响应用户事件（如点击事件)

需求：

页面上的列表原先有3个，我们想点击一次添加一条记录，也可以在头和尾删除数据；

我们也可以删除我们想删除的任意一行记录；

如果是用传统的jquery操作，页面中射流研究…会特别多，而且操作也很麻烦。

这里用vue.js就非常简单。

我们先看页面效果：

页面初始化。巴布亚新几内亚

末尾增加一项。巴布亚新几内亚

删除项。巴布亚新几内亚

再来看代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title demo 04/title link rel='样式表href='./CSS/base/bootstrap。量滴CSS“rel=”外部无跟随“link rel=”样式表href='./CSS/base/common。CSS ' rel='外部no follow '/head body div class=' container mt15 ' id=' ul-list ' ul class=' list-group ' v-for=' items in items ' Li class=' list-group-items ' span class=' label label-default label-piece-pull-right ' v-: click=' removeTodo($ index)'/span { { item }。text } } { { $ index } }/Li/ul p class=' mt15 '按钮类型在末尾增加一项/button button type=' button ' class=' BTN BTN-二级' v-: click=' deleteAtTop($ index ')删除第一项/button button type=' button ' class=' BTN BTN-二级' v-: click=' deleteAtBottom($ index ')删除最后一项/button /p /div脚本src='http:/js/base/vue。js '/script脚本src=' http :/js/base/jquery。量滴js /脚本脚本src='http:/js/base/bootstrap。量滴js '/script script new Vue({ El : ' # ul-list '，数据： { items :[{ text: 'item' }，{ text : ' item ' }，{ text : ' item ' })，methods: { removeTodo:函数（索引){ this.items.splice(索引，1) }，addAtLast:函数}，deleteAtBottom:函数（索引){这个。物品。pop()；} } });/脚本/正文/html在上面的代码中，我们主要是通过方法来管理项目这个数据，从而实现页面上的交互。

拼接、推动、移动、弹出的用法和在射流研究…中一样。

因为这里的例子都不难，就不详细说了，大家可以照着上面的代码试试。

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