vue点击事件（确定，取消），隐藏盒子

 

<div class="mygoods">

<img src="../../assets/image/iphonex.png" alt>

<span>￥499</span>

<div class="goodname">iphonex 深空</div>

<div class="delete" @click="handleShowModal">    删除按钮

<img src="../../assets/image/delete.png" alt>

</div>

<div class="Shadow_layer" v-if="showModal" @click="handleCloseModal">  

<span>确定删除？</span>

<button class="sure">确定</button>

<button class="cancel" @click="handleCloseModal">取消</button>

</div>

</div>

 

<script>

export default {

　　components: {

　　　　　　　　},

　　　data(){

　　　　　return {

　　　　　　showModal: false,  初始化默认值。把盒子弹框隐藏

　　　　　　}

　　　},

　　methods: {

　　　　handleCloseModal() {

　　　　　　console.log('close')    打印是否成功走进事件

　　　　　　this.showModal = false;

　　　　},

　　handleShowModal() {

　　　　　　console.log('show')    打印是否成功走进事件

　　　　　　this.showModal = true;

　　　　　　　　},

　　　　}

}

 

转载于:https://www.cnblogs.com/Glant/p/10570401.html