详解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 Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
keras slice layer 层实现方式
2020/06/11 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
教你怎样写好自我评价
2013/10/05 职场文书
敬老月活动总结
2014/08/28 职场文书
毕业典礼邀请函
2015/01/31 职场文书