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 相关文章推荐
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
js实现多图左右切换功能
Aug 04 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 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
无线电的诞生过程
2021/03/01 无线电
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
php微信开发之关注事件
2018/06/14 PHP
jQuery 选择器理解
2010/03/16 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python迭代器和生成器介绍
2015/03/06 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python 经典数字滤波实例
2019/12/16 Python
python批量修改文件名的示例
2020/09/27 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
文明城市创建标语
2014/06/16 职场文书
生产助理岗位职责
2014/06/18 职场文书
营业用房租赁协议书
2014/11/26 职场文书
欢迎词怎么写
2015/01/23 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技