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. char *s 与 char s[ ]的区别

    程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其 操作方式类似于数据结构中的栈. 2.堆区( ...

  2. Mybatis动态公用sql

    <select id="collPageCount" parameterType="java.util.Map" resultType="lon ...

  3. hdu 1686 Oulipo 【KMP】(计算模式串匹配的次数——与已匹配的字串可以有交集)

    题目链接:https://vjudge.net/contest/220679#problem/B 题目大意: 输入一个T,表示有T组测试数据: 每组测试数据包括一个字符串W,T,T长度大于W小于100 ...

  4. IntelliJ IDEA 2018.3 重大升级(转)

    |0前言 2018.11.28 IntelliJ IDEA 2018.3 正式版发布.对于一个忠实爱好者,迫不及待的我下载了最新版本来体验下.而且 IDEA 今年的第三次重大更新提供了不容错过的显著功 ...

  5. 洛谷.1782.旅行商的背包(背包DP 单调队列)

    题目链接(卡常背包) 朴素的多重背包是: \(f[i][j] = \max\{ f[i-1][j-k*v[i]]+k*w[i] \}\),复杂度 \(O(nV*\sum num_i)\) 可以发现求\ ...

  6. [BOI2004]Sequence 数字序列

    Description: Hint: \(n<=10^5\) Solution: 首先考虑b不严格递增时的做法 发现当\(a[i]\)递增时\(b[i]\)直接取\(a[i]\)即可,否则此时需 ...

  7. startup.bat闪退问题

    startup.bat闪退问题 我自己遇到的 1.例如: 手动点击startup.bat 后 ,一闪而过 2例如:在cmd下 进到tomcat的bin目录 运行 startup.bat 解决问题,第一 ...

  8. android:ProgressDialog控件

    ProgressDialog 和 AlertDialog 有点类似,都可以在界面上弹出一个对话框,都能够屏蔽 掉其他控件的交互能力.不同的是,ProgressDialog 会在对话框中显示一个进度条, ...

  9. JSON序列——根据JSON生成事务性SQL2

    JSON序列——根据JSON生成事务性SQL2 procedure TForm1.Button3Click(Sender: TObject); begin var json:string:=''+ ' ...

  10. 在远程桌面服务中配置RD网关直接访问内网

    原文地址:http://wangchunhai.blog.51cto.com/225186/1139388/ 远程桌面网关(RD 网关)是一项角色服务,使授权远程用户可以从任何连接到 Internet ...