时间戳

首页 > 解决方案 > 单击主 div 时隐藏 div，但单击子 div、href、spans 等时不隐藏

vue.js - 单击主 div 时隐藏 div，但单击子 div、href、spans 等时不隐藏

问题描述

因此，当您单击蓝色内容时，我想隐藏它，但如果您单击子元素，例如 h2、a、p 等，则不会。这可能吗？

请看小提琴

html

<html>
  <head></head>
  <body>
    <div id="app">
      <div v-if="modal" id="content" @click="toggle">
          <h3>
            Name
          </h3>
          <span>
            <a href="">Like this (don't close if clicked)</a>
          </span>
      </div>
      <button @click="toggle">Toggle</button>
    </div>
  </body>
</html>

.js

new Vue({
    el: '#app',
  data: {
    modal: true
  },
  methods: {
    toggle: function( ){
        this.modal = !this.modal
    }
  }
});

.css

a {
  color: white
}
#content {
  width: 300px;
  height: 300px;
  background: blue;
  color: white;
}

小提琴：http: //jsfiddle.net/awu752mr/6/

标签： vue.jsvuejs2

解决方案

我相信这就是v-on:click.self修饰符的作用。请参阅文档中的此处。

推荐阅读