广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用vue控制元素显示隐藏方式
  • 885
分享到

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

vue元素vue元素显示vue元素隐藏 2022-11-13 14:11:55 885人浏览 安东尼
摘要

目录Vue控制元素显示隐藏解释注意点控制元素显示隐藏 v-show与v-if,以及v-if-elsev-show与v-if作用vue控制元素显示隐藏 html代码:  <div

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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 使用vue控制元素显示隐藏方式

本文链接: https://www.lsjlt.com/news/172083.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 使用vue控制元素显示隐藏方式
    目录vue控制元素显示隐藏解释注意点控制元素显示隐藏 v-show与v-if,以及v-if-elsev-show与v-if作用vue控制元素显示隐藏 HTML代码:  <div...
    99+
    2022-11-13
    vue元素 vue元素显示 vue元素隐藏
  • vue中怎么控制元素显示隐藏
    这篇文章主要讲解了“vue中怎么控制元素显示隐藏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中怎么控制元素显示隐藏”吧! ...
    99+
    2022-10-19
  • 使用Vue 控制元素显示隐藏的方法和区别
    目录一、控制元素显示隐藏的方法1. v-if 和 v-else 指令2. 切换元素的CSS display属性3. opacity属性4. visibility属性5. width和...
    99+
    2022-12-08
    Vue  控制元素显示隐藏 Vue  控制元素显示隐藏 vue显示隐藏
  • vue如何控制元素的隐藏与显示
    vue如何控制元素的隐藏与显示,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。vue控制元素隐藏与显示的方法:1、利用“v-if...
    99+
    2022-10-19
  • 怎么利用vue控制元素的显示与隐藏
    这篇文章主要介绍了怎么利用vue控制元素的显示与隐藏的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么利用vue控制元素的显示与隐藏文章都会有所收获,下面我们一起来看看吧。 方法:使用 v-...
    99+
    2023-07-04
  • jquery如何控制元素显示和隐藏
    使用jQuery可以通过以下方法来控制元素的显示和隐藏:1. 显示元素:使用`show()`方法来显示元素。例如:`$("#elem...
    99+
    2023-08-08
    jquery
  • css控制元素隐藏和显示的方法是什么
    CSS控制元素隐藏和显示的方法有以下几种:1. display属性:可以设置为none来隐藏元素,设置为block或其他合适的值来显...
    99+
    2023-08-08
    css
  • uniapp怎么动态控制元素的显示隐藏
    在Uniapp中,我们经常需要根据用户的操作或者其他条件来显示或隐藏一些页面元素。例如,当用户点击一个按钮时,我们需要显示一个弹窗窗口,或者根据用户是否登录来动态地显示登录或者注册按钮。在这种情况下,我们可以使用Uniapp提供的v-sho...
    99+
    2023-05-14
  • jquery如何控制li元素的显示与隐藏
    小编给大家分享一下jquery如何控制li元素的显示与隐藏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!jquery控制li元素...
    99+
    2022-10-19
  • JavaScript如何控制页面元素的显示和隐藏
    在现代网页设计中,JavaScript 可谓是无处不在,它的功能也十分强大。其中,控制页面元素的显示和隐藏是很多开发人员经常需要用到的功能。本篇文章就将介绍 JavaScript 如何实现控制页面元素的显示和隐藏。一、通过修改元素的 dis...
    99+
    2023-05-14
  • 怎么使用CSS布局属性控制元素的隐藏与显示
    今天小编给大家分享一下怎么使用CSS布局属性控制元素的隐藏与显示的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我...
    99+
    2022-10-19
  • css如何使用display显示隐藏元素
    这篇文章给大家分享的是有关css如何使用display显示隐藏元素的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css的全称是什么css的全称是Cascading Style Sheets(层叠样式表),它是一种...
    99+
    2023-06-14
  • Vue之el-select结合v-if动态控制template显示隐藏方式
    目录el-select结合v-if动态控制template显示隐藏Vue动态控制表格列的显示隐藏效果总结el-select结合v-if动态控制template显示隐藏 背景: 根据(...
    99+
    2023-05-15
    Vue el-select Vue v-if Vue template显示隐藏
  • Flutter控制组件显示和隐藏三种方式详解
    目录方式一:if语句控制方式二:Offstage组件方式三: VisibilityOffstage和Visibility的区别:方式一:if语句控制 // 例如: Column( ...
    99+
    2022-11-13
    Flutter控制组件显示隐藏 Flutter 控制组件
  • 如何使用CSS实现显示和隐藏div元素
    在网页设计和开发中,控制元素的显示和隐藏是一项非常重要的任务。CSS提供了一组属性和方法来实现这个功能,其中最常用的是display属性和visibility属性。本文将介绍如何使用CSS div元素来实现显示和隐藏功能。一、display...
    99+
    2023-05-14
  • jQuery框架实现元素显示及隐藏三种动画方式
    目录一、默认方式显示和隐藏二、滑动方式显示和隐藏三、淡入淡出方式显示和隐藏四、案例:广告的自动显示和隐藏本文分享自华为云社区《jQuery框架实现元素显示及隐藏动画【附案例分析】》,...
    99+
    2022-11-12
  • 探讨jQuery显示和隐藏元素的各种方法
    jQuery 是一种流行的 JavaScript 库,用于简化前端开发中的交互和动画效果。其中一个常见的用法是操作 DOM 元素的可见性。在这篇文章中,我们将探讨 jQuery 显示和隐藏元素的各种方法。显示元素首先,让我们看看如何使用 j...
    99+
    2023-05-14
  • vue实现动态控制表格列的显示隐藏
    本文实例为大家分享了vue实现动态控制表格列显示隐藏的具体代码,供大家参考,具体内容如下 一、效果 如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对...
    99+
    2022-11-13
  • vue elementUI表格控制怎么显示隐藏对应列
    这篇文章主要介绍“vue elementUI表格控制怎么显示隐藏对应列”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue elementUI表格控制怎么显示隐藏对应列”文章能帮...
    99+
    2023-06-30
  • Vue中子组件的显示与隐藏方式
    目录子组件的显示与隐藏第一步 使用v-show1.1 父组件1.2 子组件2 第二步 父子组件传参2.1 父组件2.2 子组件子组件的显示与隐藏 在使用Vue开发前端页面的过程中,经...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作