详解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 相关文章推荐
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
详解Nuxt.js 实战集锦
Nov 19 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
优化使用mysql存储session的php代码
2008/01/10 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python实现剪切功能
2019/01/23 Python
详解python算法之冒泡排序
2019/03/05 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python super()函数使用及多重继承
2020/05/06 Python
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
社区平安建设汇报材料
2014/08/14 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
党员民主评议总结
2014/10/20 职场文书
追悼会悼词大全
2015/06/23 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP