关键词：
【中文标题】Vue js v-if在共享切换按钮上进行条件渲染【英文标题】：Vue js v-if condicional rendering on a shared toggle button 【发布时间】：2019-02-07 20:55:36 【问题描述】： //PARENT COMPONENT
<template>
....
<div class="input-wrapper">//Toggle button container
<label class="input-label">
SELECT YES OR NOT
</label>
<toggle //child component, toggle button
:options="shipping"
/>
</div>
<div
v-if="destiny[0].value"
class="input-wrapper">
<label class="input-label">
IF YES THIS CONTAINER WILL BE DISPLAYED
</label>
<toggle
:options="Options"
/>
</div>
.....
</template>
<script>
import Toggle from "....";
export default
components:
Toggle,
,
data: function ()
return
destiny: [
label: 'Yes',
value: true
,
label: 'No',
value: false
],
Options: [
label: 'A',
value: 'a'
,
label: 'B',
value: 'b'
,
label: 'C',
value: 'c'
]
</script>
///CHILD COMPONENT
<template>
<div class="toggle">
<button
v-for="option in options"
:key="option.value"
:class="
active: option.value === value
"
class="btn"
@click="() => toggleHandler(option.value)"> option.label .
</button>
</div>
</template>
<script>
export default
props:
options:
type: Array,
required: true
,
data: function ()
return
value: this.options[0].value
,
methods:
toggleHandler (value)
this.$emit('input', value)
this.value = value
</script>
有选项是或否的切换，如果选择是，则子组件将被渲染，否则将保持隐藏。 我正在尝试使用条件来使用指令 v-if 或 v-show 将子组件显示到父组件中，但我找不到方法将布尔值值从子组件发送到父组件。
【问题讨论】：
【参考方案1】：希望这会有所帮助！
// CHILD
Vue.component('child',
template: '<div>TOGGLE:- <input type="checkbox" @click="emit"/></div>',
data()
return
checked: false
;
,
methods:
emit: function()
this.checked = !this.checked;
this.$emit('event_child', this.checked);
);
// PARENT
var vm = new Vue(
el: '#app',
data: function()
return
toggleStatus: false
,
methods:
eventChild: function(checked)
this.toggleStatus = checked;
,
)<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
<child v-on:event_child="eventChild"></child>
<div id="toggle">TOGGLE STATUS => toggleStatus</div>
</div>【讨论】：
表格中的 vue.js 条件渲染
】表格中的vue.js条件渲染【英文标题】：vue.jsconditionalrenderingintables【发布时间】：2016-12-0119:32:06【问题描述】：我有一个由vue填充的表格，如果有数据，我想在其中显示行，如果没有数据，我想显示“无结果”的行。这是jsfiddle... 查看详情
v-show与v-if区别
...app初始化的时候编译并且渲染，并且在之后一直存在。当切换v-show模块时，只是简单的更改css。v-if当切换v-if模块时，Vue.js有一个局部编译/卸载过程，因为v-if之中的模板也可能包括数据绑定或子组件。v-if是真实的条件渲 查看详情
前端面试vue部分——v-show和v-if的区别
v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show则适用于需要非常频繁切换条件的场景。v-if是条件渲染，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块v-show... 查看详情
vue中得v-if和v-show
... v-ifvsv-showv-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染... 查看详情
如何利用vue.js库中的v-show显示和隐藏元素
...lt;/h1>如果ok这个变量为真，就会显示Hello!v-show是简单的切换元素的CSS属性display，也就是会占用浏览器内存空间，另外一个类似的是v-ifv-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监... 查看详情
Vue.js：尽管有条件渲染，元素仍会显示片刻
...：2019-03-2120:06:21【问题描述】：我有一个导航按钮，可以切换菜单和登录按钮。当用户未经授权时，他只能看到登录按钮。当用户登录时，该按钮消失，他/她可以看到一个切换用户菜单的汉堡按钮。我有一个基于属性isLoaded的条... 查看详情
5.8v-if等
...渲染:??v-show和v-if的区别v-if是真正的条件渲染,他会确保在切换过程中条件块内的时间和子组件被销毁和重建(组件被重建将会调用created)v-show不论如何,都会被渲染在DOM中,当条件为真值时,将会修改条件的css样式v-if有更高的切换开... 查看详情
vue的条件渲染详解(代码片段)
...v-else、v-else-if以及v-show的用法v-if的渲染方式：会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；只有当条件第一次变为真时，才会开始渲染条件块；切换开销比v-show高；v-show的渲染方式：不管初始条件... 查看详情
vue条件渲染与列表渲染
...一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。 <te... 查看详情
vue篇章/vue中的v-if和v-show有什么区别
v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show... 查看详情
vue使用v-ifv-show页面闪烁，div闪现的解决方法(代码片段)
...的，但是两者还是存在很大区别的。v-if与v-show区别：在切换v-if块时，Vue.js有一个局部编译/卸载过程，因为v-if之中的模板也可能包括数据绑定或子组件。v-if是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建... 查看详情
vue的一些小记录(代码片段)
...的区别v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开... 查看详情
简述vue中v-if和v-show的区别
...om元素，以此达到隐藏的效果； 所以v-if在每次切换的时候都会重新创建或者销毁元素，有较高的切换性能消耗； 而且v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要... 查看详情
vue--v-if&v-show
...-show的元素会始终渲染并保留在DOM中，是根据display属性来切换，而v-if的元素初始并没有，只有为true的时候才会生成并渲染，会完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件2、v-show无法用于元素，也不能... 查看详情
如何在 Vue.js 插槽中使用条件渲染？
】如何在Vue.js插槽中使用条件渲染？【英文标题】：HowtouseconditionalrenderingwithVue.jsslots?【发布时间】：2020-11-1523:51:37【问题描述】：如何使用v-if的结果在Vue中渲染两个不同的组件？如果重要的话，我也在尝试使用v-for渲染TreeView... 查看详情
vue条件渲染v-ifv-show(代码片段)
...-if类似，只是元素始终被渲染并保留在DOM中，只是简单的切换CSS属性display来显示或者隐藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8& 查看详情
vue条件渲染
v-if在字符串模板中，如Handlebars，我们得像这样写一个条件块：<!--Handlebars模板-->{{#ifok}}<h1>Yes</h1>{{/if}}在Vue.js，我们使用v-if指令实现同样的功能：<h1v-if="ok">Yes</h1>也可以用v-else添加一个“else”块：<h1v-if=... 查看详情
vue
...if与v-show的区别v-if是‘真正’的条件渲染因为他会确保在切换的过程中条件快内的事件监听器和子组件适当的被销毁和创建v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲... 查看详情