Vue.js 单击主div时隐藏div，但单击子div、hrefs、span等时不隐藏div_Vue.js_Vuejs2

Vue.js 单击主div时隐藏div，但单击子div、hrefs、span等时不隐藏div

vue.js vuejs2

Vue.js 单击主div时隐藏div，但单击子div、hrefs、span等时不隐藏div,vue.js,vuejs2,Vue.js,Vuejs2,所以，当你点击蓝色内容时，我想隐藏它，但如果你点击一个子元素，比如h2，a，p，等等，这是可能的吗请看小提琴 html <html> <head></head> <body> <div id="app"> <div v-if="modal" id="content" @click="toggle"> <h3> Name

所以，当你点击蓝色内容时，我想隐藏它，但如果你点击一个子元素，比如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>

.css

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

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

小提琴：

我相信这就是

v-on:click.self

修饰符所做的

我相信这就是

v-on:click.self

修饰符所做的

正如@LShapz所回答的，修饰符=

.self

应该是推荐的方法（Vue风格）

另一种方法是比较

$event.target===$event.currentTarget

（不建议将这两个属性用于您的用例，但您可以在将来的某些其他情况下使用）

Vue.config.productionTip=false
新Vue({
el:“#应用程序”，
数据：{
莫代尔：对
},
方法：{
切换：功能（ev）{
如果（ev.target==ev.currentTarget）this.modal=！this.modal
}
}
});
a{
颜色：白色
}
#内容{
宽度：300px；
高度：300px；
背景：蓝色；
颜色：白色；
}

名称
切换
正如@LShapz回答的那样，修饰符=.self
应该是推荐的方法（Vue风格）
另一种方法是比较$event.target===$event.currentTarget
（不建议将这两个属性用于您的用例，但您可以在将来的某些其他情况下使用）

Vue.config.productionTip=false
新Vue({
el:“#应用程序”，
数据：{
莫代尔：对
},
方法：{
切换：功能（ev）{
如果（ev.target==ev.currentTarget）this.modal=！this.modal
}
}
});
a{
颜色：白色
}
#内容{
宽度：300px；
高度：300px；
背景：蓝色；
颜色：白色；
}

名称
切换