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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
微信小程序 在线支付功能的实现
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
PHP Memcached应用实现代码
2010/02/08 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Python读取网页内容的方法
2015/07/30 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
详解Python sys.argv使用方法
2019/05/10 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Jupyter加载文件的实现方法
2020/04/14 Python
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
高中班主任评语大全
2014/04/25 职场文书
运动会的口号
2014/06/09 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
淮海战役观后感
2015/06/11 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
React配置子路由的实现
2021/06/03 Javascript
python实现简单聊天功能
2021/07/07 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
Python中的socket网络模块介绍
2022/07/23 Python