Vue-动态修改数组
需求描述:
点击删除时,仅删除当前选中的这个对象。

html:
<el-card shadow="never" style="position: relative;">
<div class="lottery-ct">
总量:
<el-input type="number" @change="totalChange(item)" v-model="item.totalNum" style="width: 12%;" :disabled="isOpen"></el-input>
库存: {{item.stockNum}}
</div>
<img style="position: absolute;right: 0;top: 10px;right: 10px;cursor: pointer;" src="data:images/i-cl-close1.115e49e.png" @click="closeList(item)"></img>
</el-card>
@click="closeList(item)" 将当前循环的 item 传入 js:
closeList(item){
this.list.splice(this.list.indexOf(item), 1)
},
运用 splice (要删除的元素, 删除个数)
Vue-动态修改数组的更多相关文章
- Vue 动态修改data 值 并触发视图更新
Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新
- Vue动态修改网页标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- vue中修改数组,dom未更新的问题
vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...
- vue动态修改title
1.项目中,cmd下 ,运行:cnpm install vue-wechat-title --save 2.在 main.js 中,设置: import VueWechatTitle from 'vu ...
- vue $set修改数组
看了别人写的,自己简单写一下自己的理解. 因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化,所以,想要正常是不能通过操作数组来渲染dom的,解决的方法是通过set方法, 在组件 ...
- Vue动态修改class
#####对象方法-最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染) :class="{ 'active': isActive }"1判断是否绑定一个act ...
- vue 动态修改 css
<div v-for="i in resultDate" v-if="i.ProjectId>='4'" @click=EveyTesttInfo( ...
- vue 动态修改el-upload 的action
action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例: //html 代码 <el-upload ...
- 微信小程序setdata修改数组或对象
1.this.setdata修改数组的固定一项的值 changeItemInArr: function() { this.setData({ 'arr[0].text':'changed data' ...
- 基于Vue的SPA动态修改页面title的方法
最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...
随机推荐
- [时序图笔记] 步步为营UML建模系列五、时序图(Squence diagram)【转】
概述 顺序图是一种详细表示对象之间以及对象与参与者实例之间交互的图,它由一组协作的对象(或参与者实例)以及它们之间可发送的消息组成,它强调消息之间的顺序. 顺序图是一种详细表示对象之间以及对象与系统外 ...
- 在Linux(CentOS 6.6)服务器上安装并配置基于Apache的SVN服务器
#!/bin/bash # # 在Linux(CentOS 6.6)服务器上安装并配置基于Apache的SVN服务器: # # .安装服务 # .创建svn版本库 # .创建svn用户 # .配置sv ...
- 爬虫基础02-day24
写在前面 上课第24天,打卡: 努力不必让全世界知道: s16/17爬虫2 内容回顾: 1. Http协议 Http协议:GET / http1.1/r/n...../r/r/r/na=1 TCP协议 ...
- HanLP用户自定义词典源码分析
HanLP用户自定义词典源码分析 1. 官方文档及参考链接 关于词典问题Issue,首先参考:FAQ 自定义词典其实是基于规则的分词,它的用法参考这个issue 如果有些数量词.字母词需要分词,可参考 ...
- SpringBoot入门笔记(二)、使用fastjson
1.添加fastjson配置 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastj ...
- JDK自带的LinkedHashMap来实现LRU算法
1 代码如下 public class LRULinkedHashMap<K, V> extends LinkedHashMap<K, V> { private final i ...
- servlet增删改查
Servlet 使用Servlet进行增删改查 步骤 1. 导入以下几个jar包到WEB-INF下的lib包里,必要时build path,其中jstl.jar和standard.jar是使用jst ...
- day 12 - 1 装饰器进阶
装饰器进阶 装饰器的简单回顾 装饰器开发原则:开放封闭原则装饰器的作用:在不改变原函数的调用方式的情况下,在函数的前后添加功能装饰器的本质:闭包函数 装饰器的模式 def wrapper(func): ...
- 关于tcp queue
半连接队列:服务端维护的与客户端保持SYN_RECV状态的连接队列,等待客户端回复,当收到客户端ack后,如果条件允许(全连接队列未达到最大值),服务端进入ESTAB状态,从半连接队列移到全连接队列的 ...
- 实验吧 smali文件分析
题目链接:http://www.shiyanbar.com/ctf/1871 好吧,这题真是基础中的基础,基础中的战斗机. 不光没有任何绕弯的地方,逻辑有且仅有一个.... 多说无益,使用工具jadx ...