详解vue添加删除元素的方法


Posted in Javascript onJune 30, 2018

相关版实例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue实例:添加删除元素r</title>
  <style type="text/css">
    .form-group{
      margin:10px;
    }
    .form-group>label{
      display: inline-block;
      width: 5rem;
      text-align: right;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="form-group">
      <label>name:</label>
      <input type="text" name="" v-model='newitems.name'>
    </div>
    <div class="form-group">
      <label>age:</label>
      <input type="text" name="" v-model='newitems.age'>
    </div>
    <div class="form-group">
      <label>sex:</label>
      <select v-model='newitems.sex'>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>

    </div>
    <div class="form-group">
      <label></label>
      <button v-on:click = 'addPerson'>Create</button>
    </div>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Sex</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items"><!--v-for-->
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.sex}}</td>
          <td><button @click="deletePerson($index)">Delete</button></td>
        </tr>
      </tbody>

    </table>
  </div>

</body>
<script src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:'#app',
    data:{
      newitems:{
        name:'',
        age:'18',
        sex:'女'
      },//newitems默认的
      items:[{
        name:'lily',
        age:18,
        sex:'女'
      },{
        name:'lily',
        age:18,
        sex:'女'
      },{
        name:'lily',
        age:18,
        sex:'女'
      },{
        name:'lily',
        age:18,
        sex:'女'
      },{
        name:'lily',
        age:18,
        sex:'女'
      }]
    },
    methods:{
      addPerson:function(){
        this.items.push(this.newitems)//往items中添加newitems
        this.newitems = {name:'',age:'18',sex:'女'}
      },//添加元素
      deletePerson: function(index){
        // 删一个数组元素
        this.items.splice(index,1);
      }
    }
  })
</script>
</html>

大家可以测试以下,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
vue.js删除列表中的一行
Jun 30 #Javascript
vue v-model动态生成详解
Jun 30 #Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 #Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 #Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 #Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
利用python实现AR教程
2019/11/20 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
婚礼主持结束词
2014/03/13 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
小学领导班子对照材料
2014/08/23 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
运动会主持人开幕词
2016/03/04 职场文书
python 如何用terminal输入参数
2021/05/25 Python