Vuejs显示/隐藏条件
Vue.js是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以轻松地构建交互式的Web应用程序。
在Vue.js中，可以使用v-if和v-show指令来实现条件显示/隐藏。这两个指令的作用是根据指定的条件来控制元素的显示与隐藏。
- v-if指令：根据条件判断是否渲染元素。当条件为真时，元素会被渲染到DOM中；当条件为假时，元素会被从DOM中移除。这个指令适用于需要频繁切换显示状态的情况。
示例代码：
<div v-if="condition">显示内容</div>- v-show指令：根据条件判断是否显示元素。当条件为真时，元素会显示；当条件为假时，元素会隐藏。这个指令适用于需要频繁切换显示状态的情况。
示例代码：
<div v-show="condition">显示内容</div>区别：
- v-if是惰性的，即在条件为假时，元素不会被渲染到DOM中；而v-show会在DOM中保留元素，只是通过CSS的display属性来控制显示与隐藏。
- v-if适用于在运行时条件很少改变的情况下，因为它有更高的切换开销；而v-show适用于需要频繁切换显示状态的情况，因为它只是通过CSS来控制显示与隐藏。
Vue.js官方文档中关于v-if和v-show的详细介绍和用法可以参考以下链接：
腾讯云相关产品中与Vue.js开发相关的推荐产品是云开发（CloudBase）。
相关·内容
1回答
我有一个PrimeVue边栏组件，如下所示，并传入一个动态组件给它。(现在它是一个单独的组件，只是为了让它启动和运行)。 该组件显示很棒，并且它包含一些文本输入字段，当侧栏关闭时，我希望保留它们的值。即用户键入一些数据，关闭侧边栏，然后重新打开，并且键入的内容仍然在那里供他们继续。 我尝试过将组件包装在中，但似乎不起作用，如下所示。 我似乎就是不能让它工作--任何帮助都将不胜感激！ 运行Vue3，PrimeVue 3使用Vite。 谢谢
浏览 21提问于2021-02-24得票数 1
回答已采纳
我希望在初始加载过程中隐藏html元素，通过单击按钮或链接，我将显示这些html元素。我找不到在vuejs2版本中隐藏或显示元素的解决方案。我能在vuejs中看到几个选项，但我不知道如何使用这些方法。下面是我的组件代码，因为我想隐藏html元素(Id) "Message“。
<template>
<div class="row">
<div class="col-lg-12">
<label class="checkbox checkbox-inline no_
浏览 4提问于2017-07-25得票数 2
回答已采纳
5回答
我正在尝试使用VueJs的条件渲染，在VueJs2.0中使用handlebars，按照their documentation，但是eslint返回了错误： - avoid using JavaScript keyword as property name: "if" in expression {{#if ok}}
- avoid using JavaScript keyword as property name: "if" in expression {{/if}} VueJs似乎没有渲染它。 <!-- Handlebars template --&g
浏览 50提问于2017-08-08得票数 6
回答已采纳
1回答
基本上它说的是。<keep-alive>的意义是什么？这听起来可能很傻，但我认为这样做的目的是缓存与当前未在DOM中呈现的组件关联的数据。根据的说法，<keep-alive>是专门设计的，当一个元素从页面中删除时，它会删除它所持有的缓存。那我错过了什么？
为什么我想将<keep-alive>与v-show结合使用？v-show的全部要点不是，元素仍然存在于页面上，只是设置了CSS来隐藏它吗？默认情况下，元素在使用v-show隐藏数据时是否丢失数据？
为了明确起见，下面的示例显然是不起作用的(根据我链接的已关闭的bug/问题)：
<div v-if=&#
浏览 2提问于2020-01-20得票数 2
回答已采纳
我希望在内容显示之前先加载预加载程序，但是当我安装库时。它显示预加载程序，但它没有先加载。内容和预加载器同时进行。请问如何先加载预加载程序，然后在加载后显示内容？谢谢。
以下是代码：
也可以在这里访问代码：
App.vue
<template>
<div id="app">
<scaling-squares-spinner
:animation-duration="1250"
:size="65"
color="#ff1d5e"
/>
浏览 3提问于2020-12-21得票数 0
回答已采纳
1回答
我最近一直在构建一个数据表，并停留在某个地方。我希望我的列是可点击的，以便能够以升序和降序显示行。当它们以升序显示时，我想显示我的arrow_upward图标，否则我想显示arrow_downward图标。这是我到目前为止所做的。 data () {
return {
arrow_upward: 'arrow_upward',
arrow_downward: 'arrow_downward',
}
} 顺便说一句，这是我的材料图标的用法... <span class="table-icons"
浏览 28提问于2021-01-28得票数 0
回答已采纳
2回答
我有一个表，它的第一行有两个<tr>标记(我知道，但不幸的是它必须这样)：
标签一：
<tr class="abc"
@click="expanFunc">
标签二：
<tr class="abc">
我希望我的表格只显示标签一，如果屏幕尺寸是大的或中的，标签二，如果我的屏幕尺寸是小的或xs。我需要这是动态发生的，而不是刷新页面。我如何才能做到这一点？
浏览 12提问于2020-03-04得票数 0
1回答
我有这个vue组件，当用户单击carousel上的图像时，它会在创建后显示完整大小的图像。当它打开时，用户应该不能滚动页面。目前，我实现的方法是在创建或销毁组件时，直接使用overflow:hidden；或overflow:auto；设置documentElement的样式。 我的问题是这是否可以接受，或者是否有一种方法可以使用虚拟DOM。我知道直接干扰DOM通常是不好的做法，但我似乎找不到一种方法来使其工作。我尝试过使用this.$root.$el.style，但似乎也不起作用。 <script>
export default {
props: ['imageSrc
浏览 32提问于2020-10-16得票数 1
如果单击了任何用户链接，我希望显示/隐藏一个新的div：
<ul id="pm-tabs">
<li v-for="user in unreadMsgsList">
<a @click="openPMbox(user)"> ${user}</a>
</li>
</ul>
方法是：
openPMbox: function(user) {
this.isPmBoxOpenList[user]
浏览 3提问于2017-03-17得票数 3
我有一个显示我所有内容类型的视图。我想要的是，如果此特定视图行上的内容类型具有文章的内容类型，则将某个字段隐藏在其行中。
我怎么能这么做？
浏览 0提问于2016-09-06得票数 2
我需要建立一个自定义文件上传器上传图像配置文件，但我不想使用原始设计的输入文件，但隐藏它，并显示一个按钮，只上传图片。
我知道当用jQuery和AngularJS点击不同的按钮时如何触发输入文件，但我找不到用VueJS做同样事情的方法，你有什么想法吗？
致以亲切的问候！
浏览 6提问于2016-09-19得票数 40
我希望隐藏/显示一些字段取决于用户选择的另一个字段。因此，用户可以在四轮/两轮之间进行选择。如果用户从下拉列表中选择四轮车，则会显示不同的字段集，而对于两个轮轮者，则显示不同的字段集。由于有许多公共字段，我希望对这两种内容类型使用相同的内容类型。
到目前为止，我尝试的是
Theme_name_form_alter在theme_name.theme文件中的钩子
以及hook_form_FORM_ID_alter
似乎没有人为我工作
浏览 1提问于2017-05-04得票数 2
我正在尝试学习vue，创建以下示例纯粹是为了测试目的：
import App from '../comp/app.vue';
import Two from '../comp/two.vue';
const routes = [
{ path: '/', component: App },
{ path: '/two', component: Two }
]
const router = new VueRouter({
base: base.pathname,
mode: "history
浏览 14提问于2017-02-01得票数 7
回答已采纳
1回答
我试图通过使用JavaScript本机禁用VueJs中的paypal按钮，因此，在加载paypal iframe时，我尝试这样做：
methods: {
async initPaypal() {
this.$store.dispatch('app/clearMessage')
this.isLoading = true
try {
const { payments } = await paymentService.getPaymentContext(this.group)
const widgetPa
浏览 9提问于2022-01-10得票数 0
3回答
嘿，我正在用vuejs 3构建一个spa应用程序，我被v-if和v-else卡住了，没有按预期工作。 <div v-if="this.isScroll" @click = "toggleIsScroll" class ="spinner-container ">
<i ref = "icon" class = "bi bi-pause-fill icon"> </i>
<div ref="spinner" class ="sp
浏览 46提问于2021-10-05得票数 0
我正在使用v-for循环我的消息。现在，我想要的是检查每个消息日期，如果日期有变化，则显示日期，将其添加到我的数据中，然后继续。这意味着每天只能显示一次。
<template v-for="(message, index) in messages">
<div class="spacer">
<span class="grouped-date" v-if="displayPostDate(message.created_at)">
{{ message.created
浏览 1提问于2019-03-25得票数 1
我已经应用了骨架加载器，直到数据加载。但如果没有数据或没有订单，我想显示一个空的订单页。我想知道两种情况下都显示装载器和空篮子页面的条件。我不知道该怎么做。我是个新手。以下是我的代码： <template>
<v-container>
<div class="text-h2" style="margin-bottom: 20px;">
Order History
</div>
<div v-if="orders.length < 1">
<
浏览 6提问于2020-09-09得票数 0
回答已采纳
我在数据数组中有一个值列表。我想显示前两个值(0和1)，并显示按钮show_more。如果单击该按钮，则显示另一组值(2，3)，然后必须单击该按钮以显示更多数据。
请参阅以下代码：
<div id="app">
<h2>List:</h2>
<div v-for="(d, index) in data">
<!-- display 0 and 1, then after a button is clicked, display 2 & 3,
and then a button
浏览 2提问于2020-04-17得票数 0
回答已采纳
2回答
我在2003年创建了一个infopath表单，其中只希望根据用户的选择显示某些部分/控件。我知道有一些规则和条件必须应用于此，但是我已经添加了当用户从下拉列表中选择一个选项时需要显示的所有部分/字段。我的主要问题是，我如何在表单上隐藏这些信息？当我选择“预览表单”时，所有的部分都会出现，但还没有选择任何选项。在用户做出选择之前，我如何隐藏这些内容。我希望回答这个问题会对我剩下的表格有所帮助。
谢谢~
浏览 9提问于2011-11-03得票数 0
回答已采纳
当我在页面上列出数据，而控制台vue data()正确显示时。就像在控制台上检查一样。
但是我用相同的页面数据过滤数据()不会像这个检查控制台那样显示
这是我的代码
<script>
import AppLayout from '../../Layouts/AppLayout'
import Pagination from '../../Pages/Common/Pagination'
export default {
props: [
'videos',
'
浏览 2提问于2021-04-13得票数 0
1回答
我需要在我正在处理的应用程序上显示一些树结构。示例数据如下所示：
Category 1
- Subcategory 1.1
- Subcategory 1.1.1: 5 items
- Subcategory 1.1.2: 6 items
- Subcategory 1.2
- Subcategory 1.2.1: 2 items
Category 2
- Subcategory 2.1
- Subca
浏览 3提问于2016-04-25得票数 2
回答已采纳
我需要一个区域的表单被隐藏时，页面加载和显示时，用户点击一个按钮。我尝试了一个动态动作，我使用了"Show“和"Hide”，但它没有按计划工作。该区域在加载页面后显示。
浏览 0提问于2021-10-21得票数 0
我有一个数据输入框，可以在旁边的框中自动给出输出。如何才能使其在单击保存按钮时仅显示，而不是自动显示？
下面是输入
input#head(type="text" name="head" required="" minlength="4" maxlength="8" size="10" placeholder="cm" v-model="height")
每当我输入任何东西时，它都会自动在这里输出。我想让它只在我点击保存按钮时显示它。
.two
p H
浏览 0提问于2020-05-26得票数 0
我需要有条件地显示一列，根据用户的许可，在背包中的拉拉。
只需要为管理显示customer和total列。在文档中，我找到了visibleInShow，但不知道如何使用它。
注意：我需要用头.使列不可见
CRUD::column('user')->label('Customer');
CRUD::modifyColumn('user', [
'name' => 'user',
'type' => 'closure',
浏览 0提问于2022-03-20得票数 0
回答已采纳
1回答
我有一个Drupal 7视图，它使用字段作为显示类型。
有三个字段，如果任何一个字段为空，我不想显示该行。
目前，我正在为这三个字段中的每一个添加一个过滤器来实现这一点。也就是说，如果我有20个字段，我将不得不去20个过滤器。
有更简单的方法吗？
我可以通过重写行样式输出模板文件，然后添加一些自定义的php代码来做到这一点。但是我想知道是否有一种更容易使用视图管理界面的方法。
浏览 0提问于2014-02-20得票数 2
我在vue项目中使用vuejs-datepicker。我想隐藏默认输入，并在用户按下按钮时显示日历。我正在尝试让<datepicker/>在div中应用css为div，以便我可以隐藏它。
<div class="datePickerDiv">
<datepicker class="date" ref="datepick"></datepicker>
</div>
<style scoped>
.datePickerDiv {
position: relative;
浏览 0提问于2020-07-06得票数 2
回答已采纳
我用这种方式显示一个：
<label v-tippy content="My content text">
它工作得很好，但我现在需要基于一个条件show_tip == true来展示它。
我该怎么做呢？
浏览 17提问于2020-11-13得票数 1
回答已采纳
2回答
我在Oracle reports 10g中制作了一个报告，我想要显示的只是总数。我希望删除详细信息行，以便合计行是每个日期的所有显示。我可以隐藏详细信息，但报表仍然留有空格，并且我不知道如何缩小日期行和合计行之间的差距，使它们均匀地相邻显示。
浏览 1提问于2012-04-17得票数 0
我希望消除分组之间的额外空格。我有一个报告，如果Property参数的GroupBy为Yes，则不显示该报告的详细信息。问题是它在组之间显示行。
=IIF(Parameters!GroupBy.Value="Property",True,False)
谢谢
浏览 0提问于2019-04-17得票数 0
##Question
如何在vue项目中添加一个条件语句，以便在某些数据不可用时显示某个元素，并隐藏父元素。
##Background
我是从塔科API获得数据，其中包括一个食谱。然而，有时数据是空的。
如果有数据，目前的情况如下
如果没有数据，则只有一个空白部分。
##Code
基于的演示
带vue的##HTML
<h3>Recipe <span>not available</span></h3>
<p>
<vue-markdown>{{ taco.recipe.title }}</vue
浏览 0提问于2018-07-14得票数 1
1回答
我正在使用VS 10中的Setup Project为我的应用程序创建一个安装程序。安装程序中有一个Checkboxes (A)表单。我的问题是，我想基于一个注册表项有条件地显示该表单。我如何才能做到这一点？我正在使用Orca编辑我的安装程序文件，但我应该如何更改才能有条件地显示此表单？当我编辑InstallUISequence>CustomCheckA_SetProperty_CHECKBOX1时，复选框的值发生了变化。我看不到任何其他属性，我可以编辑以实现此目的:(.请帮帮忙，谢谢！欢迎光临。
浏览 2提问于2013-02-18得票数 1
回答已采纳
我有一个表单a，包含几个简单的字段和一个富文本主体字段。我希望能够只显示特定记录的正文字段(而不是整个表单)。
例如，以下记录的url为：
我只想显示记录中的Body字段。
下面是我的表格的gif
浏览 0提问于2017-09-05得票数 0
1回答
我有一个名为P2_Status的选择列表，它有三个选项
CREATEDAPPROVEDCANCELLED
我在那页上还有三个按钮
CreateApproveCancel
下面是显示和隐藏上面列出的按钮的下列条件
CONDITION-1:我希望当创建的状态被选中时，上面所有的三个按钮都会显示出来。没问题
CONDITION-2:当取消的状态被选中时，只允许创建按钮显示其他按钮应该被隐藏。
CONDITION-3:当选择已批准的状态时，则允许CREATE和CANCEL按钮显示“批准”按钮应该隐藏。
我已经尝试过很多SERVERSIDE条件没有解决我的问题。我也尝试过动态动作页面重新加载，但它只工作
浏览 7提问于2022-08-16得票数 0
视图的‘fields空’配置不能正常工作，因此所有的空字段都显示出来了。
是否有任何工作可以强制在视图结果(Page/block)中完全隐藏空字段，既不使用“无结果行为”下的配置，也不使用视图-php/块-php？
浏览 0提问于2016-06-26得票数 2
我正在使用带有WP忍者表单插件和UIKit模式组件的jQuery来创建和显示来自忍者表单调查问卷的动态警报。
我已经搜索了如何与忍者表单以及jQuery和UIKit javascript函数进行交互。代码如下：
var labelBtn = [
// Set 1
"#nf-label-class-field-36-0",
"#nf-label-class-field-81-1",
"#nf-label-class-field-70-1",
"#nf-label-class-field-96-1",
"
浏览 2提问于2018-09-10得票数 1
如何在VueJS2中显示内部计算的值？实际上，我试图使用计算属性返回值单击*2。因此，我使用表达式{{counter}}显示输出。但是我没有得到任何输出，一开始它被设置为0(存储在数据中)。就连我都没用过一次。那么，为什么我的计数器值不通过计算属性更新呢？
<div id="app4">
<p>counter : {{ counter }}</p>
<p>clicks : {{ click }}</p>
<button v-on:click="increment">
浏览 0提问于2018-09-21得票数 1
回答已采纳
1回答
我想从控制器中恢复一个变量并显示它，但它显示的是NaN而不是值。这个想法是在我的控制器中的函数调用进度中计算我的项目的进度，然后在我的Html代码中将其显示在表格中。这是我在控制器中的函数，它返回正确的值： public function progress($id){
$tasks=Task::where(['projet_id'=>$id])->get();
$x=0;
$i=0;
foreach ($tasks as $task) {
$x = $x + $task->progress;
$i
浏览 9提问于2020-04-05得票数 0
1回答
我正在做一个用于Vue的RealWord App项目。我试图找到一种隐藏短语"test“的方法，这样它就不能显示任何带有"test”短语的文章。 TagList.vue组件： <template>
<ul class="tag-list">
<li
class="tag-default tag-pill tag-outline"
v-for="(tag, index) of tags"
:key="index"
>
浏览 16提问于2020-08-30得票数 0
回答已采纳
1回答
我希望创建一些Excel的条件格式，显示一个团队成员是否达到了基于他们所在的团队的目标。当我更改员工姓名时，团队名称可以更改。在我的目标选项卡中，我有每个员工应该为每个不同的团队实现的目标。
我可以在条件格式中使用什么公式来查看团队名称并将其与该团队的目标进行比较？如果没有达到目标，我希望单元格显示为红色。当团队名称改变时，这个公式会自动更新吗？
提前感谢！
浏览 3提问于2017-03-30得票数 0
我有一个if条件，我需要知道如果条件的计算结果为true，如何显示/隐藏属性值。 if mbo.getString("DSP_L_LGL_INT_IND")=="L" and mbo.getString("STATUS")!="Admin Error":
mbo.getMboValue("INGRANTVIEW.LOCATION").setRequired(True)
mbo.getMboValue("LOCATIONS.OPFAC").setRequired(True)
浏览 47提问于2020-09-18得票数 1
3回答
我是vue的新手，我得到了这个错误，我不确定我是否正确地传递道具并在其他组件中很好地执行它。我会详细解释我想要取得的成就。
我隐藏了一个组件点击这个页面，并显示另一个元素在这里交替单击。
我读过几个解决方案，但我不明白我应该如何修复它，
<div v-if="hidden" class="orderSummary">
<div class="orderSummary__container">
<h2 class="orderSummary__header">Orde
浏览 4提问于2020-06-26得票数 0
1回答
我有一个SPA，我想在我的注册页面上显示验证错误。
Register.vue：
export default {
middleware: 'guest',
data: () => ({
errors: [],
form: ({
name: '',
email: '',
password: '',
password_confirmation: ''
}
浏览 2提问于2020-08-09得票数 0
3回答
通过单击在多个列中选择列？
、、、、
我的报告如下所示
Region1 Region2 Region3 Region4 Region5 state1 state2 state3 state4 state5
我已经创建了列选择参数和区域值0州值1
如果我选择Region只显示区域1到5，或者如果我选择State只显示状态1到5，我需要如何进行更改？
你们能帮帮我吗?我已经被困了3天了。我尝试使用下面的单列选择进行选择
expression =iif(instr(Join(Parameters!ColumnSelect.Value,","),"01")>0,false,true)
但是我不能一次选
浏览 1提问于2014-02-20得票数 0
在SQL Server Reporting Services (SSRS)中，我有一个包含子报表B的mainReport A。此子报表B还有另一个子报表C。 当我尝试导出为CSV (或XML)时，另一个选项卡打开，显示发生错误(错误:无法显示Subreport。(rrRenderingError))。当subReport B包含数据时，导出工作正常。只有当subreportB的数据源不收集数据时，才会显示错误。有没有人已经有过同样的问题？ 谢谢, Hélder Antunes
浏览 9提问于2020-10-28得票数 0
2回答
我是VueJS的新手。这里有一个组件，用于显示在我页面的移动版本上的横幅。我想关闭它时，点击X图标。我怎样才能做到这一点？我需要一个按钮吗？
<template>
<div class="mobile-banner">
<div class="container card">
<div class="row">
<div class="column one">
浏览 3提问于2021-05-02得票数 2
回答已采纳
我试图在用户配置文件页面上显示一些块，只有当用户对该用户配置文件具有特定角色时才会显示。
我看到了一个基于节点类型的条件。有办法为用户做同样的事情吗？
浏览 0提问于2019-05-23得票数 -1
回答已采纳
1回答
‘希望有人能帮我。我正在研究Vue，pinia……甚至javascript……一组数据通过python后端来自mySQL数据库，pinia和我想要访问数组中的一个项目……
<script setup>
import { computed, ref }from 'vue'
import { storeToRefs } from 'pinia'
import { useBaseStore } from '../stores/base'
const { area } = storeToRefs(u
浏览 1提问于2022-07-01得票数 0
我有三个输入，作为外部主机的externalIP，作为端口的externalHttpPort和作为供应商的供应商，如果它们中的任何一个丢失，我希望显示错误消息。但说得具体一点，
if (!this.externalIP || !this.externalHttpPort || !this.vendor) {
当我执行if条件时，这是有效的，但我不确定如何判断哪个输入是空的。剩下的唯一一种方法是添加3个多个if
像这样的东西
let error;
error = !this.externalIP
? "External IP Address (or URL) is inc
浏览 27提问于2020-02-16得票数 0
在我的VuewJS应用程序中，我希望能够单击一行并显示/隐藏下面的行。然而，当我这样做时，我得到了一个奇怪的bug，因为下面的行只填充了一列宽度。
这是我的桌子结构：
注意:这个表是动态生成的。
顶部有4列的行具有一个属性id，填充4列的长行具有一个数据属性data-body-id。
<tr v-bind:key="data.id" v-bind:id="index" v-on:click="rowClick(index)">
<td>Col 1</td>
<td>
浏览 1提问于2019-09-16得票数 0
回答已采纳
我有一个报告，我有大约5个字段紧挨着其他字段，在大约90%的报告中没有返回数据。有没有办法隐藏这些字段，如果它们是空的，或者如果它们包含数据，就显示它们？
谢谢
浏览 0提问于2010-07-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
