vuejs响应用户事件,如点击事件

永利402com官方网站 6
永利402com官方网站

比方是用古板的jquery操作,页面中js会特别多,而且操作也很麻烦。

需求:
页面上的列表原先有3个,我们想点击一次添加一条记录,也可以在头和尾删除数据;
我们也可以删除我们想删除的任意一行记录;
如果是用传统的jquery操作,页面中js会特别多,而且操作也很麻烦。

永利402com官方网站 1

永利402com官方网站 2

以上正是本文的全体内容,希望对我们的就学抱有扶助,也目的在于大家多多辅助脚本之家。

永利402com官方网站 3

<!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">
    <link rel="stylesheet" href="../css/base/common.css">
</head>
<body>

    <div class="container mt15" id="ul-lists">
        <ul class="list-group" v-for="item in items">
          <li class="list-group-item">
            ×
            {{item.text}}&emsp;{{$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>

你大概感兴趣的稿子:

  • 动用vue实现点击开关滑出面板的落到实处代码
  • vue完毕列表的丰盛点击
  • Vue 固定头 固定列
    点击表头可排序的报表组件
  • 行使vue编写二个点击数字计时小游戏
  • 永利402com官方网站,vueJS轻易的点击显示与隐藏的坚守【完毕代码】
  • 咱俩先看页面效果:

此间用vue.js就极度轻便。

上一篇作品,介绍了怎么通过vue.js达成绑定列表数据,那篇文章将要上一篇的功底介绍怎样响应用户的点击事件。

因为此地的例证都轻易,就不详细说了,我们能够照着方面包车型大巴代码试试。

永利402com官方网站 4

<!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">
   ×
   {{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>
splice、push、shift、pop的用法和在js中一样。

页面起先化.png

页面开端化.png

再来看代码:

在地点的代码中,大家重点是通过艺术来保管Items那一个数目,从而达成页面上的互动。

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

删除项.png

最终增添一项.png

  • 再来看代码:

咱俩也得以去除我们想删除的自由一行记录;

因为此处的例证都轻便,就不详细说了,大家能够照着方面包车型地铁代码试试。

永利402com官方网站 5

永利402com官方网站 6

页面上的列表原先有3个,大家想点击一回增多一条记下,也足以在头和尾删除数据;

那边用vue.js就特别轻易。

删除项.png

末尾增添一项.png

在上头的代码中,大家器重是透过措施来治本Items这几个数额,从而完成页面上的竞相。

需求:

我们先看页面效果:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图