详解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 相关文章推荐
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
对Session和Cookie的区分与解释
2007/03/16 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
DOM 高级编程
2015/05/06 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
微信小程序入门教程
2016/11/18 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
MySQL 数据库范式化设计理论
2022/04/22 MySQL