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

前端之家收集整理的这篇文章主要介绍了vuejs响应用户事件(如点击事件)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需求:

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

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

如果是用传统的jquery操作,页面中js会特别多,而且操作也很麻烦。

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

我们先看页面效果

页面初始化.png

末尾增加一项.png

删除项.png

再来看代码

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <Meta http-equiv="x-ua-compatible" content="ie=edge"> demo04

<div class="container mt15" id="ul-lists">
<ul class="list-group" v-for="item in items">
<li class="list-group-item">
<span class="label label-default label-pill pull-right" v-on:click="removeTodo($index)">×
{{item.text}} {{$index}}

增加一项

<script src="../js/base/vue.js">
<script src="../js/base/jquery.min.js">
<script src="../js/base/bootstrap.min.js">

在上面的代码中,我们主要是通过方法来管理Items这个数据,从而实现页面上的交互。

splice、push、shift、pop的用法和在js中一样。

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

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

猜你在找的Vue相关文章