在vuejs2中隐藏html元素
在vuejs2中隐藏html元素
提问于 2017-07-25 15:58:26
我希望在初始加载过程中隐藏html元素，通过单击按钮或链接，我将显示这些html元素。我找不到在vuejs2版本中隐藏或显示元素的解决方案。我能在vuejs中看到几个选项，但我不知道如何使用这些方法。下面是我的组件代码，因为我想隐藏html元素(Id) "Message“。
<template>
<div class="row">
<div class="col-lg-12">
<label class="checkbox checkbox-inline no_indent">
<input type="checkbox" value="">Show stats
</label>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">List Values</h3>
</div>
<div class="panel-body">
<button type="button" id="btn1" class="btn btn-warning btn-md" v-on:click="showWorkflow">Test 1</button>
<button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="showWorkflow">Test 2</button>
<button type="button" id="btn3" class="btn btn-info btn-md" v-on:click="showWorkflow">Test 3</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="Message">Hello i am here</div>
</div>
</template>
<script>
export default {
name: 'jobs',
methods: {
showWorkflow: function (e) {
console.log(e.target.id)
}
}
}
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-25 16:10:18
在Vue中，使用指令有条件地呈现元素。
如果只想切换CSS 指令属性，也可以使用CSS。
有关更多信息，请参见条件渲染文档中的部分。
在您的具体情况下，将showWorkflow设置为最初设置为false的数据属性。
使用此参数作为v-if指令对您最初要隐藏的内容的参数。
然后，当您想要显示内容时，将showWorkflow设置为true
new Vue({
el: '#app',
data() {
return {
showWorkflow: false,
}
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div v-if="showWorkflow">
Here is the workflow
</div>
<button @click="showWorkflow = true">Show Workflow</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45308292
复制相关文章
相似问题
腾讯云开发者
