vue指令 v-show 控制显示和不显示的状态

朲間烝茷

于 2020-12-25 15:19:20 发布

阅读量2.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # vue 文章标签： v-show

本文链接：https://blog.youkuaiyun.com/pyp_demon/article/details/111683008

vue 专栏收录该内容

18 篇文章

订阅专栏

使用v-show的时候，被隐藏的属性还在页面上，只不过css中的属性被设置为了 display:none，当页面需要频繁切换的时候可以使用v-show

<template>
  <div class="hello">

    <div>
      <label v-show="sta">张三丰</label>
      <label v-show="!sta">张翠山</label>
    </div>
    <button @click="changeSta">换人</button>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      sta: false
    }
  },
  methods: {
    changeSta () {
      this.sta = !this.sta
    }
  },

  computed: {

  },

  async created () {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>