如何在Vue.JS中运行v-if之后的方法？
在Vue.js中，v-if是一个条件指令，用于根据条件来显示或隐藏元素。当条件为真时，元素会被渲染到DOM中，否则会被移除。
如果你想在v-if之后执行一些方法，可以使用Vue.js提供的生命周期钩子函数或者watch属性来实现。
- 使用生命周期钩子函数： 在Vue组件中，可以使用created或mounted生命周期钩子函数来执行v-if之后的方法。这两个钩子函数在组件实例被创建和挂载到DOM之后被调用。
- 使用生命周期钩子函数： 在Vue组件中，可以使用created或mounted生命周期钩子函数来执行v-if之后的方法。这两个钩子函数在组件实例被创建和挂载到DOM之后被调用。
- 使用watch属性： 可以使用watch属性来监听条件变化，并在条件为真时执行方法。
- 使用watch属性： 可以使用watch属性来监听条件变化，并在条件为真时执行方法。
以上是在Vue.js中运行v-if之后的方法的两种常见实现方式。根据具体的业务需求和代码结构，你可以选择适合的方式来实现。关于Vue.js的更多详细信息和用法，请参考腾讯云的Vue.js文档：Vue.js文档。
相关·内容
我正在通过上的参考文档学习。
然后，我要做一个例子。但是，部分示例不起作用。
这是我的密码。
<template id="app-3">
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</template>
<script src="vue.js"></script>
<
浏览 1提问于2018-05-12得票数 0
回答已采纳
我试图使用onClick()函数向传单映射层的geojson特性添加pointToLayer()功能。然后，当我试图通过单击显示的圆圈触发这些功能时，我遇到了以下错误：
vue.js:973 Uncaught RangeError: Maximum call stack size exceeded
at Function.getOwnPropertyDescriptor (<anonymous>)
at defineReactive (vue.js:973)
at Observer.walk (vue.js:897)
at new Observe
浏览 0提问于2018-03-22得票数 3
使用Vue.js，我需要切换一个父-div，但是总是显示子-div。
<div v-if="showparent" class="parent">
<div class="child">
Child should always be visible
</div>
</div>
据我所知，这在Vue.js中是不可能的。当v-if为false时，showparent指令移除所有div的内部。
有什么办法可以做到吗？
浏览 10提问于2016-08-15得票数 13
如何使用v-if在vue.js中检查url的元值？
假设我有这个url：http://127.0.0.1:8000/setting
我想在我的v-应用程序中创建像这样的条件。
<v-app v-if="(if 'setting' is in the url)">
浏览 5提问于2022-03-15得票数 0
我刚刚开始使用Vue.js。我在这里有一个精简版的jsfiddle：。在Chrome中运行良好，但在IE 11中，我得到'c‘is undefined’文件: vue.js，第: 2252行，第36列。我正在动态构建一个HTML表，其中的列和行只有在运行时通过查询服务才能获知。为了在jsfiddle中演示，我用硬编码的值替换了服务调用。完成下面的代码。
<div id="deliverables">
<div v-show="error" class="ProjectDeliverables_error">{{er
浏览 0提问于2016-10-25得票数 4
我正在制作一个搜索栏组件。如果搜索字段中的用户输入值长度大于1，则在右侧包含一个小的交叉按钮。
到目前为止，这就是我所拥有的：
模板
<template lang="pug">
.search
.search__wrapper
form.search
input#search__input(
type="search"
v-model="taskSearch"
浏览 3提问于2017-09-21得票数 1
使用vue.js 2，在for循环中，我只需要在当前迭代的项通过某些测试时才呈现一行。
测试很复杂，所以简单的v-if="item.value == x"是不行的。
我已经编写了一个名为testIssue的函数，它接受该项并返回true或false，并尝试使用如下所示的v-if：
<template v-for="issue in search_results.issues">
<tr v-if="testIssue(issue)">
....
</tr>
</template>
浏览 125提问于2017-07-04得票数 4
在使用vue v-if之后，什么时候可以在dom中使用元素？我认为您可以在v-if计算结果为true之后对元素执行查询选择器吗？
在下面的代码中，一旦弹出显示出来，我需要获得.test元素，但它显示为null -我如何获得它？
new Vue({
el: "#app",
data() {
return {
showPopout: false,
};
},
methods: {
buttonClick(day) {
this.showPopout = true;
console.log(documen
浏览 1提问于2022-05-06得票数 0
回答已采纳
在下面的示例中，v-if相关的div似乎都不是在单击Add按钮之前或之后呈现的。似乎在更新pizzas对象时，Vue.js没有运行任何更新。
有没有办法解决这个问题，而不需要把比萨变量变成数组呢？
<div id="app">
<div v-for="pizza in pizzas">
{{ pizza }}
</div>
<div v-if="totalPizzas === 0">
No pizza. :(
</div>
<div v-if=&
浏览 1提问于2018-01-30得票数 2
回答已采纳
1回答
我希望同时使用Vue.js和jQuery来动态显示一个自动完成字段。
new Vue({
el: "#el",
data: {
toggle: false
}
});
var tags = [
"ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
"Erlang","
浏览 0提问于2018-06-29得票数 2
回答已采纳
2回答
我希望在Vue.js中获得道具值，因为我需要在组件中接收eid来进行验证，但我不知道如何做到这一点，如果我这样做，那么Vue.js就是未定义的。另一种方法是将data()值从组件A发送到组件B。
我有这个组件，我需要得到eid，然后插入v-if
<section v-if="" >
<stream :configs="{eid : event.id}"></stream>
</section>
另一种方法是将数据()从组件A发送到组件B
data() {
return {
tipo: String
浏览 4提问于2020-04-02得票数 0
回答已采纳
4回答
我试着给一些类v-if="seen“，但它显然不起作用…… 我的代码： <div class="item" v-if="seen">item 1</div>
<div class="item" v-if="seen">item 2</div>
<div class="item" v-if="seen">item 3</div>
var item = new Vue({
el: 'div.item'
浏览 32提问于2018-08-09得票数 1
回答已采纳
&和&&在Vue.js中有什么区别？
我测试：
<span
v-if="1 > 0 & 2 > 1"
>
span
</span>
和
<span
v-if="1 > 0 && 2 > 1"
>
span
</span>
span将显示这两个文本。
那么，他们在Vue.js中有什么不同吗？
浏览 2提问于2018-05-23得票数 0
回答已采纳
我刚开始学习Vue.js，已经有问题了。特殊字符在模板中的编码不正确。
<template>
<div class="navbar">
<span>VOD</span>
<ul class="menu">
<li v-if="user">Konto</li>
<li v-if="!user">Zaloguj się</li>
浏览 18提问于2018-03-03得票数 5
我和这个bug斗争了几个小时，并设法将它缩小为一个非常简单的脚本。我设法在中复制了错误。
我想显示基于给定货币的价格。如果货币是USD，只需显示价格。如果是其他东西，则显示转换后的价格(在本例中，为EUR)，并选择单击它并查看原始价格。
正如您在小提琴中所看到的，如果您将输入中的初始USD更改为US，则条件不再满足，并显示转换后的价格。如果你点击价格，你可以看到原来的价格。
但是，如果您输入D返回以便货币再次为USD，则会得到以下错误：
vue.js:1743 TypeError: Cannot read property '_pending' of null
at p
浏览 0提问于2018-05-17得票数 1
我在Vue.js中有一些自定义组件。在我拥有的一个组件中，有一个选择列表，我希望将其呈现为一个选择框。我将其与jQuery函数$("select").chosen()一起使用。
<template v-for="upload in uploads">
<new-upload-container :index="$index" :upload="upload" v-if="isNewUpload"></new-upload-container>
<existi
浏览 38提问于2016-01-26得票数 23
回答已采纳
有办法用Vue做这种有条件的嵌套吗？(显然，<component is="template">将一个非解析的<template>标记输出到DOM中，但不会呈现任何内容)
<component :is="condition ? 'div' : 'template'">
<!-- 2 elements here -->
</component>
这样做的目的是避免不必要的标记，或者在v-if v-else中重复我的2元素代码两次。
同时，有一个带有两个元素的子组件也没
浏览 1提问于2020-05-16得票数 0
回答已采纳
1回答
Vue.js禁用空白注释
、、、
通常，当Vue.js通过v-if隐藏元素时，会在其位置留下注释。
Vue文件：
<div v-if="true">Hello</div>
<div v-if="false">world</div>
输出：
<div v-if="true">Hello</div>
<!-- -->
是否可以禁用此评论的外观？
所需输出：
<div v-if="true">Hello</div>
浏览 2提问于2021-05-29得票数 0
在vue.js中，我有以下代码：
<q-btn @click="goEditMode" color="primary" icon="edit" label="Edit"
v-if="this.form.userName.toLowerCase() !== 'admin'" />
添加toLowerCase().后发生错误
以下是错误：
[Vue warn]: Error in render: "TypeError: Cannot read property '
浏览 5提问于2021-03-30得票数 1
回答已采纳
v-if的许多示例使用非限定变量名，如：
<h1 v-if="awesome">Vue is awesome!</h1>
但是我想知道下面的代码是否等价？
<h1 v-if="this.awesome">Vue is awesome!</h1>
这似乎是正确的，但我正在寻求一些关于利弊的指导。
我之所以问这个问题，是因为当指定v-if时，"this“是不推荐的，但是在开发计算属性时，"this”是引用模型变量的必需的。
这使得开发人员的情况不一致。
从vue.js源代码中，他们使用javascrip
浏览 4提问于2021-05-27得票数 0
<div v-for="item in imControls.messages" >
<p v-once>
<span class="" v-if="item.type==3">{{item.name}}:</span>
<span class="red" v-if="item.type==4">{{item.name}}:</span>
<span class="blue&
浏览 2提问于2016-12-29得票数 1
1回答
考虑一下：
class X {}
class B extends X {}
class C extends X {}
在一个组件中，我有一个X数组：
<template>
<ul>
<li v-for="item in items">
<a-view v-if="item.constructor.name === 'A'"></a-view>
<b-view v-if="item.constructor
浏览 15提问于2018-02-12得票数 3
1回答
我有一个包含多个表单步骤的vue.js表单，需要简化html5验证，如下所示：
<template>
<div>
<div v-if="activeForm === 1">
<h2>
How much does {{ form.name }} weight?
</h2>
<text-input
v-model="form.weight&
浏览 0提问于2019-08-01得票数 1
回答已采纳
我在vue.js中有这样的数据结构
data() {
return {
formData: new Form({
files:[],
Count:5,
..
}
我试图使用以下代码来获取长度：
<div class="image-input" v-if="this.formData.files.length < this.formData.Count">
当我运行这段代码时，我在控制台中得到了这个错误：
TypeError:无法读取未定义属性的“长度”
该错误出现
浏览 5提问于2020-10-30得票数 0
我有一个叫做toggleShow的方法。我从两个不同的元素调用它，但是我需要toggleShow来切换调用它的元素的v-if值。在vue.js中，最干净的方法是什么？
<template>
<div @click="toggleShow">
<button v-if="!isShowing">View Hidden Box 1</button>
<div v-if="isShowing">
<button>Close Hidd
浏览 10提问于2019-03-27得票数 0
回答已采纳
在Vue.js中，如果希望通过v-if/v-else-if指令有条件地呈现多个元素，可以将它们包装在<template>标记中，并将该指令应用于<template>标记，如解释的所示。但是，您也可以对包装多个元素的<div>标记执行同样的操作。在<template> <div> 上使用或其他类似的原生HTML5标记有什么显著的性能好处吗？
浏览 1提问于2018-08-24得票数 24
回答已采纳
Vue.js中的一个简单问题。在这段代码中，第二个"project“没有任何"Property"，显然没有"Number"，这使得html显示为空，当数组中没有数据时该如何处理？我试过v-if，但不能让它工作。谢谢 <div v-for="propiedad in info" class="propiedad">
<div class="propiedad">
{{ project.Property[0].Number }}
</div>
&l
浏览 50提问于2020-07-21得票数 0
回答已采纳
我在一个内联模板中创建了一个表单，我在其中有条件地呈现表单，如下所示 <form v-if="editing === true" >
<button type="submit" @click="editing = false">Update</button>
</form>
<div v-if="editing === false">
浏览 20提问于2020-05-03得票数 0
回答已采纳
1回答
有没有人在vue.js中尝试过动态表行跨度？
下面是数据
{
date: '2018-08-14',
temp_que : 120,
},
{
date: '2018-08-14',
temp_que : 120,
},
{
date: '2018-08-15',
temp_que : 120,
},
{
date: '2018-08-15',
temp_que : 120,
},
下面是html vue
<template v-for="(item,
浏览 2提问于2018-11-12得票数 5
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../../plugins/vue/vue.js"></script>
</head>
<body>
<div id="statistics">
<div v-for="(item,index) in topKeyWords" v-if="(index &l
浏览 0提问于2020-08-04得票数 0
我有一个输入框，里面有一个字符串。当字符串的长度达到某个数字时，我可以执行一个方法(在vue.js中)吗？
就像这样
<input v-if="inputBox.length == 6 THEN runme()"...>
浏览 1提问于2018-11-30得票数 1
回答已采纳
1回答
我有一大堆重复的表单输入，我想把它们抽象成一个组件。我想做以下几件事：
<InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType">
让它输出如下所示的代码
<template>
<div>
<label>Your name</label>
<input v-model="us
浏览 9提问于2017-01-17得票数 0
我有一个在created()方法中加载内容的Vue.js应用程序。我使用v-if标记来隐藏我所有的UI，直到内容加载完毕并准备就绪。它在初始加载时运行良好，但如果用户在Chrome中点击刷新，则应用程序会显示(瞬间闪烁)否则不会显示的内容(基于在创建时加载的数据)。 根据我对使用v-if标记的理解，在我准备显示内容之前，使用vuex存储中的一个标志来指示加载完成是隐藏内容的正确方法。 如何避免内容在刷新时闪烁？
浏览 20提问于2019-09-24得票数 3
回答已采纳
我是网页开发和vue.js的新手。我尝试了很多方式来设计我的代码，但是它没有起作用。下面是我的vue.js代码示例。请让我知道它的样式。我在这里提供我的代码实现。我创建了一个图形、图形标题和图像标记，作为我的配置文件的描述，我想向其中添加css。
<!DOCTYPE HTML>
<html>
<head>
<title>v-if If Statements</title>
<meta charset="UTF-8">
<script src=
浏览 3提问于2022-04-24得票数 0
var app = new Vue({
el: '#app',
data: {
products:[
{
product_id:'21221312',
product:[
{variation:'paper', price:'12'}
]
},
{
product_id:'2122131212',
product:[
{vari
浏览 2提问于2021-05-20得票数 0
是否有一种方法可以通过Vue.js中的另一个属性访问同一元素的其他属性？
示例
而不是写：
<kpi title="some_kpi" v-if="displayed_kpi==='some_kpi'"></kpi>
做这样的事：
<kpi title="some_kpi" v-if="displayed_kpi===title"></kpi>
这意味着我希望访问相同标记的v-if中标题的值。(显然这不是这样的)有什么办法吗？
浏览 3提问于2022-03-15得票数 0
列表项
<ul>
<li>language</li>
< v-if= "tree()"> //which tag I may use or any other process
<li>home</li>
<li>about</li>
<>
< v-else> //which tag I may use or any other process
<li>accounts</li>
&l
浏览 1提问于2018-03-11得票数 51
回答已采纳
1回答
我是Vue.js的新手，我对监视/计算属性感到迷惑。我已经在上面检查了其他答案，但似乎都没有帮助。
我正在构建一个非常基本的身份验证检查机制，在该机制中，我将一个值存储在localStorage中，并检查它是否可以显示组件。
我的v-if代码块如果行为不符合预期，它会在重新加载后触发，而不是触发预渲染。我做错了什么？
<template>
<div class="container-fluid h-100">
<div class="wrapper">
<nav id=
浏览 0提问于2019-11-27得票数 0
1回答
如何在开发时绑定到未知属性名称
、、、、
下面的代码正确地绑定到我的模型上的属性 <v-checkbox
v-if="header.dataType === 'Toggle'"
v-model="myprops.item.superColumn"
@change="onChanged(myprops.item)"
></v-checkbox> 就像这个一样 <v-checkbox
v-if="header.dataType === &
浏览 17提问于2019-02-06得票数 0
回答已采纳
我想调用子组件的方法。
我认为开发人员在呈现所有子组件之后使用$nextTick函数来处理数据。
但是，在通过v-if指令进行呈现时，我如何调用子组件的方法。
这是一个。
var comp = Vue.component('child', {
data:function(){
return {
}
},
template:`
<div class="child">
I'm a child
</div>
`,
methods:{
callFunction:
浏览 1提问于2019-07-22得票数 2
回答已采纳
我刚接触Vue.js，我刚刚阅读了这里关于条件渲染()的文档，但不知何故无法让它工作……
我的代码：
<button onclick="showTemplate()">Teste</button>
<template v-if="app">
<div id="app">
{{ message }}
</div>
</template>
function showTemplate(){
var app = new Vue({
浏览 18提问于2017-07-06得票数 0
回答已采纳
假设我有以下vue.js模板代码：
<div v-if="x===0">
<input ref="text">{{text}}</input>
</div>
其中x是一些异步加载的数据。
在对'if‘语句求值之后，我该如何关注'input’元素呢？
浏览 0提问于2018-07-10得票数 0
使用下面的代码，我将在单击时显示元素的信息。
现在，当我单击页面上的一个元素时，它将使用以下方法获取有关此对象的所有详细信息：
<div @click="getFolderDetails(props.item)>
...
</div>
问题是，如何获得数据(运行方法)不是在@click上，而是在元素加载时(在created()上)？
方法：
getFolderDetails (value) {
this.objectTypeClicked = 'folder'
this.folderDetails = [
{
浏览 0提问于2018-02-23得票数 1
回答已采纳
1回答
我想使用vue.js中的if-指令来确定应该在每个表行中显示哪个数据字段：
<tr v-repeat="model">
<td>@{{ title }}</td>
<td>@{{ publish_date_start }}</td>
<td v-if="model.publish = 1"><span class="fa fa-check"></span></td>
<td v-if="mode
浏览 0提问于2015-09-28得票数 0
2回答
我想知道在Vue.js中是否有一种方法可以生成以下代码：
<template v-if="type === 'login'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-if="type === 'subscribe'">
<lab
浏览 1提问于2018-02-24得票数 0
回答已采纳
1回答
在Vue.js 2.x上，我有一个从服务器获取数据的组件，如下所示。 <template>
...
<a href="..." v-if="data.status !== 'blind'">Link</a>
...
</template>
<script>
export default {
...
data: {
return() {
data: {}
}
};
...
async created() {
const loadedData = await this
浏览 35提问于2020-09-22得票数 0
回答已采纳
每当我的<canvas>元素(Re)附加到Vue.js中时，我如何触发函数？
模板：
<div class="article" v-if="displayArticle">
[...]
<div v-if="sample">
<canvas></canvas>
</div>
</div>
我希望每次删除画布元素，然后从DOM中重新追加一个特定的函数，例如，当sample变量设置为false，然后设置为true时，我希望调用一
浏览 1提问于2018-01-20得票数 1
回答已采纳
我使用vue.js将数据布尔值设置为在使用setTimeout几秒钟后进行更改，但结果显示数据保持不变。如果我已经返回了数据值，是什么原因造成的呢？
new Vue({
el: "#app",
data: {
showMsg: false,
},
methods: {
activeMsg() {
this.showMsg = true
this.msgNone
}
},
computed: {
msgNone() {
const msgCounter = setTimeout(()=
浏览 2提问于2022-09-02得票数 0
回答已采纳
3回答
V-if语句仅适用于一行/链接
、、、、
在VUE.JS中，当if语句不正确时，我试图在图片下面隐藏一个链接(“myprofile”)，但当我将v-if设置到vue-router或div标签中时，整个图片/div标签都被隐藏了。如何设置只与链接相关的if语句？
代码：
<router-link v-if="condition == true" class="nav-link" to="/myprofile">
<div
class="img"
浏览 1提问于2021-07-06得票数 0
4回答
几天后，我尝试在vue条件下调整响应值。
我需要这个，当值为null或空时，应用条件。
<li v-if="item[0].otrodl4.trim() == ''" class="progress-step">
但我得到了错误
vue.js:597 Vue警告:呈现错误："TypeError:无法读取属性'trim‘的null“
问题是，有些值只会带来空白，而不会带来更多的空白，这应该被视为空或空。
例如：
我试过用过滤器，但我得到了同样的错误。
谢谢你的阅读。
欢迎光临。
浏览 13提问于2020-08-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
