vuejs响应用户事件（如点击事件）

需求：

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

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

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

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

我们先看页面效果：

页面初始化.png

末尾增加一项.png

删除项.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中一样。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vueJS简单的点击显示与隐藏的效果【实现代码】

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好 感觉跟适合. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if.v-else.v-show&l

  • 使用vue编写一个点击数字计时小游戏

    使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束. 1.首先下载vue源码,下载地址http://cn.vuejs.org 2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解) 3.建立一个普通的ht

  • Vue 固定头 固定列 点击表头可排序的表格组件

    原理是将原table的指定行,指定列clone一份放在其上 实现代码如下: <template> <div> <div id="divBox1" :style="{height:height}"> <table id="tbTest1" cellpadding="0" cellspacing="0" style="text-align:center;bac

  • 使用vue实现点击按钮滑出面板的实现代码

    在通信的时候容易出错,或者信息根本传不过来.那么这里就示例一下,怎么通过组件之间的通信完成点击事件. index.vue文件中: <div> <el-button type="primary" @click="onShow">点我</el-button> </div> 传递中介 <addForm :show="formShow" @onHide="formShow = false&q

  • vue实现列表的添加点击

    本文实例为大家分享了vue实现列表的添加点击,供大家参考,具体内容如下 使用指令:v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js</title> <style> body {font-family: &quo

  • Android 如何拦截用户频繁操作(点击事件)

    目录 前言 解决方案 场景1 场景2 总结 前言 在 Android 界面开发中,频繁操作是一个需要注意的点. 频繁操作: 频繁点击一个按钮,或者同时点击多个item,等产生的冲突情况. 解决方案 场景1 假设在 Activiyt A 界面有一个 按钮 T ,点击T 将跳转到 Activity B. void handleClick(){ Intent intent = new Intent(ActivityA.this,ActivityB.class); startActivity(inten

  • vuejs响应用户事件（如点击事件）

    vuejs响应用户事件（如点击事件）

    需求: 页面上的列表原先有3个,我们想点击一次添加一条记录,也可以在头和尾删除数据: 我们也可以删除我们想删除的任意一行记录: 如果是用传统的jquery操作,页面中js会特别多,而且操作也很麻烦. 这里用vue.js就非常简单. 我们先看页面效果: 页面初始化.png 末尾增加一项.png 删除项.png 再来看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

  • 简单讲解Android开发中触摸和点击事件的相关编程方法

    在Android上,不止一个途径来侦听用户和应用程序之间交互的事件.对于用户界面里的事件,侦听方法就是从与用户交互的特定视图对象截获这些事件.视图类提供了相应的手段. 在各种用来组建布局的视图类里面,你可能会注意到一些公共的回调方法看起来对用户界面事件有用.这些方法在该对象的相关动作发生时被Android框架调用.比如,当一个视图(如一个按钮)被触摸时,该对象上的onTouchEvent()方法会被调用.不过,为了侦听这个事件,你必须扩展这个类并重写该方法.很明显,扩展每个你想使用的视图对象(只

  • vue键盘事件点击事件加native操作

    如下所示: <el-card class="box-card animated flipInY"> <el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="50px" class="d

  • vue如何通过点击事件弹出弹窗页面详解

    目录 步骤一 步骤二 总结 步骤一 创建一个弹窗页面,我们给该页面命名为dialogComponent,弹窗页面中要设置以下内容: <template> <!--1.首先,弹窗页面中要有el-dialog组件即弹窗组件,我们把弹窗中的内容放在el-dialog组件中--> <!--2.设置:visible.sync属性,动态绑定一个布尔值,通过这个属性来控制弹窗是否弹出--> <el-dialog title="弹窗" :visible.syn

  • IOS 中UIImageView响应点击事件

    IOS 中UIImageView响应点击事件 有时候会遇到点击一张图片,然后让这张图片触发一个事件,或者是跳转视图,想到的第一个方法就是用UIButton,将Button的背景图片属性设置为该图片,效果达到了,但不是最好的方法,直接触发方法 定义Image的对象 UIImageView *imgView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0,320,100)]; imgView.backgroundColor = [UIColor

  • android中在Activity中响应ListView内部按钮的点击事件的两种方法

    最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.使用接口回调: Adapter类 package com.ivan.adapter; import

  • jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

  • c# 给button添加不规则的图片以及用pictureBox替代button响应点击事件的方法

    c# 给button添加不规则的图片以及用pictureBox替代button响应点击事件的方法

    1.Flat button 用这个方法,前提是要把button的type设置为Flat 复制代码 代码如下: button1.TabStop = false;button1.FlatAppearance.BorderSize = 0;button1.FlatAppearance.BorderColor = Color.FromArgb(0, 255, 255, 255); //设置边框的颜色Transparentbutton1.FlatAppearance.MouseOverBackColor

  • wx.CheckBox创建复选框控件并响应鼠标点击事件

    wx.CheckBox创建复选框控件并响应鼠标点击事件

    本文实例为大家分享了wx.CheckBox创建复选框控件并响应鼠标点击事件的具体代码,供大家参考,具体内容如下 执行效果图: 执行代码: #!/usr/bin/env python # -*-encoding:utf-8 -*- 'Crteate CheckBox Example' import wx class MyFrame(wx.Frame): #子类化框架对像 def __init__(self,parent,id): #定义子类构造器 wx.Frame.__init__(self,pa

随机推荐