1、效果

2、index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<!--<h2>{{title}}</h2>-->
<li v-for="(item,index) in productList">
<div >产品名称:{{item.productName}}</div>
<a href="javascript:;" class="item-edit-btn" @click="delConfirm(item);">删除</a>
</li> <!--删除弹框"-->
<!--:class="{'md-show',delFlag}"这里注意,绑定class时,class和bool值中间是冒号,不是逗号-->
<div class="md-modal modal-msg md-modal-transition" :class="{'md-show':delFlag}">
<div class="md-modal-inner">
<div class="md-top">
<button class="md-close" @click="delFlag=false">关闭</button>
</div>
<div class="md-content">
<div class="confirm-tips">
<p id="cusLanInfo">你确认删除此订单信息吗?</p>
</div>
<div class="btn-wrap col-2">
<button class="btn btn--m" id="btnModalConfirm" @click="delProduct();">Yes</button>
<button class="btn btn--m btn--red" id="btnModalCancel" @click="delFlag=false">No</button>
</div>
</div>
</div>
</div>
<div class="md-overlay" v-if="delFlag"></div>
</div> <script src="js/lib/vue.min.js"></script>
<script src="js/lib/vue-resource.min.js"></script>
<script src="js/cart.js"></script>
</body>
</html>

3、index.css

img {
width: 50px;
}
a {
font-size: 30px;
color: #000;
text-decoration: none;
}
.check{
background: #EE7A23;
border-color: #EE7A23; }
.item-check-btn {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 50%;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.md-modal-transition .md-modal-inner {
background: #fff; } .md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 535px;
height: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
visibility: hidden;
z-index:;
}
.md-show {
visibility: visible;
}
.md-modal-transition .md-modal-inner {
background: #fff;
-webkit-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity:;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.md-modal .md-modal-inner {
padding: 60px 50px;
}
.md-modal-transition.md-show .md-modal-inner {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity:;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.md-overlay {
position: fixed;
top:;
left:;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index:;
}

4、cart.js

/**
* Created by kk on 2017/4/16.
*/
new Vue({
el:"#app",
data:{
// title:"hello vue"
totalMoney:0,
productList:[],
checkAllFlag:false,
totalCheckMoney:0,
delFlag:false,
curProduct:''
},
filters:{
formatMoney:function (value) {
return "¥"+value.toFixed(2)
}
},
mounted:function () {
//类似于jquery中的ready方法
this.$nextTick(function () {
this.cartView();
}) },
methods:{ delConfirm:function (item) {
this.delFlag=true;
this.curProduct=item;
},
delProduct:function () {
var index=this.productList.indexOf(this.curProduct);
this.productList.splice(index,1);
this.delFlag=false; }
} });
Vue.filter("money",function (value,type) {
return "¥"+value.toFixed(2)+type;
});

vue弹框,删除元素的更多相关文章

  1. vue 弹框

    弹框展示: 代码: <template> <div> <el-col :span="9" style="text-align: right; ...

  2. vue 弹框产生的滚动穿透问题

    首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export ...

  3. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  4. vue中点击空白处隐藏弹框(用指令优雅地实现)

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  5. 实现在vue中element-ui的el-dialog弹框拖拽

    参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...

  6. Jquary入门(添加 修改 表单元素)+ JSON+弹框

    字符串拼接 计算机语言 都是 对  数据的处理(获取/修改数据)  添加元素  除了  固定的方法添加 以外 都是   字符串拼接(拼接成固定格式即可执行). 1.表单添加元素  append() 方 ...

  7. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  8. vue移动端弹框组件,vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  9. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

随机推荐

  1. 素数筛选-hdu2710

    题目描述: 题目大意:找出具有最大素数因子的整数.如果有不止一个,则输出在输入文件中出现最早的一个. 解题思路:刚开始时,p数组中的元素全为0,刚开始对于素数 i,p[i]=0,用一个for循环,将是 ...

  2. java enum的一种写法记录

    public enum TestEnum { provider { @Override public void provide() { this.name = "hjzgg"; } ...

  3. php 允许浏览器跨域访问web服务端的解决方案

    今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的. 所谓跨域访问,就是在浏览器窗口,和某个服务端通 ...

  4. Bracket 使用指南

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由Adobe 创建和维护,根据MIT许可证发布,支持 Windo ...

  5. __Linux__文件和目录

    Linux 目录 /:根目录,一般根目录下只存放目录,在Linux下有且只有一个根目录.所有的东西都是从这里开始.当你在终端里输入“/home”,你其实是在告诉电脑,先从/(根目录)开始,再进入到ho ...

  6. python Image resize 对iOS图片素材进行2X,3X处理

    通常在iOS上开发使用的图片素材1x,2x,3x三种 下面利用python Image 库 resize函数,由一个大图,自动生成1x,2x,3x的素材照片: 1. 首先你的python环境要安装有I ...

  7. 原创:vsphere概念深入系列五:存储

    1.vSphere支持的存储文件格式: 类似于linux下挂载文件系统,需要有驱动器设备,驱动. 挂载后有挂载路径. vSphere 也是一样处理. 挂载名:挂载后可以给存储设备起名,默认为datas ...

  8. 使用JavaCV播放视频、摄像头、人脸识别

    一.导入Maven依赖包 <dependencies> <!-- https://mvnrepository.com/artifact/org.bytedeco/javacv-pla ...

  9. Win-Sshfs无法连ubuntu1404原因

    ubunbtu 默认不允许root远程访问,设置为允许就可以了 1)vi /etc/ssh/sshd_config,将PermitRootLogin的值改成yes,并保存 PermitRootLogi ...

  10. 关于select标签曾经踩过的几个坑!

      1.情景展示 select标签,是前端开发界面展示,经常需要用到一个标签,看看下面的坑,你中招了吗? 2.坑区展示 踩坑一:option标签没有声明value属性: 没有声明value属性 < ...