VUE元素的隱藏和顯示（v-show指令)

發(fā)布時間：2020-09-09 12:41:27 來源：腳本之家閱讀：333 作者：學(xué)習(xí)筆記666 欄目：web開發(fā)

除了click單擊事件，還有mouseover，mouseover等鼠標(biāo)事件。

dbclick雙擊事件。

v-on:click/mouseover/mouseover/mousedown/dbclick/...

v-show指令

v-show="true/false" //控制元素顯示/隱藏

示例代碼：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>

  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          isShow:false,
        },
        methods:{
          toggle:function(){
            this.isShow = !this.isShow;
          }
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <input type="button" value="toggle" v-on:click="toggle()"> <br />
    <div v-show="isShow" ></div>
  </div>
</body>
</html>

VUE元素的隱藏和顯示（v-show指令)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

VUE元素的隱藏和顯示（v-show指令)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽