使用vue控制元素显示隐藏方式

 更新时间:2022年08月08日 11:54:37   作者:马优晨  
这篇文章主要介绍了使用vue控制元素显示隐藏方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue控制元素显示隐藏

HTML代码:

 <div title="意向价格"   v-if="showPrise"></div> 
 <div title="意向租金"   v-show="showRentPrise"></div>

JS代码:

    new Vue({
        el: '#app',
        data: {
            showPrise:false,
            showRentPrise:false
         } 
        methods: {
           changeStatus(){
              if("你设置的条件"){
                  this.showPrise = true;
                  this.showRentPrise = true;  
              }
           }
        }
     })

解释

  • 默认showPrise和showRentPrise的状态是false,所以是隐藏的。
  • 当你在changeStatus通过了某种条件,你就可以控制showPrise和showRentPrise的状态了。true为显示,false为隐藏。

注意点

  • v-if控制 DOM的删除和添加,不同于v-show对DOM的显示和隐藏

控制元素显示隐藏 v-show与v-if,以及v-if-else

v-show与v-if作用

一.v-show

  • 控制元素显示, 通过display: none控制显示
  • 语法: v-show=“变量或者表达式”
  • 如果变量或者表达式为true, 会显示标签, 否则隐藏

二. v-if

  • v-if控制标签显示
  • 语法: v-if=“变量或者表达式”
  • v-if通过控制标签是否删除显示 , v-if有性能优势

三. 代码示例

<template>
  <div>
    <h1 v-show="age >= 18">年满18岁才能看到以下内容</h1>
    <hr>
    <h1 v-if="age >= 18">年满18岁才能看到以下内容</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age: 1,
    };
  },
  methods: {},
};
</script>
<style></style>

四.v-if-else

  • v-if可以和v-else搭配, 用来条件控制显示
  • v-if和v-else一定要是相邻元素
  • v-if和v-else-if还有v-else可以一起搭配, 实现多个条件判断
  • v-show是不可以和v-else搭配使用

代码示例

<template>
  <div>
    <h1 v-if="age >= 18">来吃榴莲</h1>
    <h1 v-else>来吃甜甜圈</h1>
    <h1 v-if="age < 18">甜甜圈</h1>
    <h1 v-else-if="age < 60">枸杞泡水</h1>
    <h1 v-else-if="age < 80">脑白金</h1>
    <h1 v-else-if="age < 100">冬虫夏草</h1>
    <h1 v-else>灵丹妙药</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age: 18,
    };
  },
  methods: {},
};
</script>
<style></style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue获取DOM元素并修改属性的方法

    Vue获取DOM元素并修改属性的方法

    这篇文章主要介绍了Vue获取DOM元素并修改属性或者样式,文中通过两种方法给大家介绍了vue 如何获取并操作DOM元素,需要的朋友可以参考下
    2022-10-10
  • Vue3+Tsx给路由加切换动画时的踩坑及解决

    Vue3+Tsx给路由加切换动画时的踩坑及解决

    这篇文章主要介绍了Vue3+Tsx给路由加切换动画时的踩坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Element UI 上传组件实现文件上传并附带额外参数功能

    Element UI 上传组件实现文件上传并附带额外参数功能

    在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,怎么操作呢,下面通过示例代码讲解感兴趣的朋友一起看看吧
    2023-08-08
  • vue单文件组件无法获取$refs的问题

    vue单文件组件无法获取$refs的问题

    这篇文章主要介绍了vue单文件组件无法获取$refs的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue 如何获取视频第一帧

    vue 如何获取视频第一帧

    这篇文章主要介绍了vue 如何获取视频第一帧,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue 实时监听窗口变化 windowresize的两种方法

    Vue 实时监听窗口变化 windowresize的两种方法

    这篇文章主要介绍了Vue 实时监听窗口变化 windowresize的两种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 在Vue中实现网页截图与截屏功能详解

    在Vue中实现网页截图与截屏功能详解

    在Web开发中,有时候需要对网页进行截图或截屏,Vue作为一个流行的JavaScript框架,提供了一些工具和库,可以方便地实现网页截图和截屏功能,本文将介绍如何在Vue中进行网页截图和截屏,需要的朋友可以参考下
    2023-06-06
  • 解决vue+element 键盘回车事件导致页面刷新的问题

    解决vue+element 键盘回车事件导致页面刷新的问题

    今天小编就为大家分享一篇解决vue+element 键盘回车事件导致页面刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue实现几秒后跳转新页面代码

    vue实现几秒后跳转新页面代码

    这篇文章主要介绍了vue实现几秒后跳转新页面代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader)

    通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下
    2018-12-12

最新评论