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


Posted in Javascript onMarch 14, 2017

需求:

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

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

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

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

我们先看页面效果:

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

页面初始化.png

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

末尾增加一项.png

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

删除项.png

再来看代码:

<!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>demo04</title>
 <link rel="stylesheet" href="../css/base/bootstrap.min.css" rel="external nofollow" >
 <link rel="stylesheet" href="../css/base/common.css" rel="external nofollow" >
</head>
<body>

 <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)">×</span>
   {{item.text}} {{$index}}
  </li>
  </ul>
  <p class="mt15">
   <button type="button" class="btn btn-info" v-on:click="addAtLast($index)">在末尾增加一项</button>
   <button type="button" class="btn btn-secondary" v-on:click="deleteAtTop($index)">删除第一项</button>
   <button type="button" class="btn btn-secondary" v-on:click="deleteAtBottom($index)">删除最后一项</button>
  </p>
 </div>

 <script src="../js/base/vue.js"></script> 
 <script src="../js/base/jquery.min.js"></script>
 <script src="../js/base/bootstrap.min.js"></script>
 <script>
  new Vue({
  el: '#ul-lists',
  data: {
   items: [
   { text: 'item' },
   { text: 'item' },
   { text: 'item' }
   ]
  },
  methods: {
   removeTodo: function (index){
   this.items.splice(index, 1)
   },
   addAtLast: function(index){
   this.items.push({ text: 'item' })
   },
   deleteAtTop: function(index){
    this.items.shift();
   },
   deleteAtBottom: function(index){
    this.items.pop();
   }
  }
  });
 </script>
</body>
</html>

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
学习vue.js计算属性
Dec 03 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
微信小程序 在线支付功能的实现
Mar 14 #Javascript
JS和canvas实现俄罗斯方块
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 #Javascript
canvas实现刮刮卡效果
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 #Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 #Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php常用表单验证类用法实例
2015/06/18 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python中format()函数的简单使用教程
2018/03/14 Python
详解Python的三种可变参数
2019/05/08 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python使用type动态创建类操作示例
2020/02/29 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
社区灵活就业证明
2014/11/03 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
繁星春水读书笔记
2015/06/30 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL