如何利用Vue.js库中的v-show显示和隐藏元素

JavaScript014

如何利用Vue.js库中的v-show显示和隐藏元素,第1张

除了click单击事件，还有mouseover，mouseover等鼠标事件。 

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" style="width: 100pxheight: 100pxbackground: red"></div>

  </div>

</body>

</html>

/*!

* Vue.js v1.0.12

* (c) 2015 Evan You

* Released under the MIT License.

*/

(function (global, factory) {

typeof exports === 'object' &&typeof module !== 'undefined' ? module.exports = factory() :

typeof define === 'function' &&define.amd ? define(factory) :

global.Vue = factory()

}

通过你的第二张截图看到你也用的是一个在线 js 资源。

看一下这个 js 资源有没有正常的加载下来。

我从中把前几行引用出来。你可以看到，实例化的全局变量的名称。你可以通过断点调试确认执行情况。

我看到你的这段代码的上面还有一些代码。你需要排除一下是不是上面的代码对 Vue 实例有一些影响。