Vue教程03：Vue事件、v-show、v-if指令

最新推荐文章于 2025-05-26 15:48:28 发布

Lee_Chen86

最新推荐文章于 2025-05-26 15:48:28 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： JavaScript Vue

本文链接：https://blog.youkuaiyun.com/chencl1986/article/details/84786651

25 篇文章

订阅专栏

本文深入探讨Vue.js中v-on指令的应用，演示如何通过事件处理进行数据操作，并对比v-show与v-if指令在元素显示隐藏上的不同实现方式及其适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码参考：lesson03/01. v-on指令.html

通过v-on指令添加事件，如v-on:click=“onClick(1)”，表示添加的是click事件，同时传入1作为参数。
v-on:click="onClick(1)"也可以简写为@click=“onClick(1)”。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    num: 1
  },
  methods: {
    onClick(add) {
      this.num = this.num + add
    },
  }
})

HTML：

<div id="app">
  {{num}}
  <button v-on:click="onClick(1)">+1</button>
</div>

代码参考：/lesson03/02. v-show、v-if指令.html

v-show通过控制样式的display: none;和display: block;，实现显示隐藏。
v-if是直接添加和删除该元素，如果有的元素即使display: none;后还是会对页面效果有影响，建议使用v-if。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    show: true
  },
  methods: {
    onClick(add) {
      this.show = !this.show
    },
  }
})

HTML：

<div id="app">
  <button v-on:click="onClick()">显示隐藏</button>
  <div class="box" v-show="show"></div>
  <div class="box2" v-if="show"></div>
</div>