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 贪吃蛇实现代码
Nov 22 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
vue-router单页面路由
Jun 17 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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断点续传之如何分割合并文件
2014/03/22 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
List Installed Software Features
2007/06/11 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
python如何调用php文件中的函数详解
2020/12/29 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
中学生爱国演讲稿
2013/12/31 职场文书
个人求职信范文分享
2014/01/06 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js