小编jos*_*dev的帖子
如何使用Vue.js隐藏div
我希望能够使用Vue隐藏div，而对性能的影响尽可能小，因为网站上将使用这种方式处理几个div。我该怎么做呢？
隐藏DIV>上的另一个DIV点击时显示它： （实施例（无Vue公司））
使用Vue（无效）
html
<div id="app" v-on:click="seen = !seen" class="control">
<p>click app</p>
</div>
<div v-if="seen" id="hide">
<p>hide me </p>
</div>
的JavaScript
new Vue({
el:'#hide',
data:{
seen: false
}
})
推荐指数
解决办法
查看次数
如何创建一个复制并插入自己的div的函数？
编辑:访问https://jsfiddle.net/DTcHh/40740/获取最终解决方案!
我有一个带有"添加问题"(Bootstrap)单选按钮的div.我的意图是,当点击上面提到的按钮时,应该复制放置按钮的div并将其放在下面:
我怎么做？单击按钮时没有任何反应.
HTML:
<div id="singleQuestionModule">
<div class="question-wrapper">
<form class="form-group">
<div class="d-flex justify-content-center">
<fieldset class="form-group row">
<legend class="col-form-legend col-sm-10"></legend>
<div class="form-group row">
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons"> …推荐指数
解决办法
查看次数
如何在Vue.js中声明反应性属性
这是Vue-routes应用程序的一部分，在其中一个路由中，我具有两个属性bga和bgb，这些属性将用于更改div的颜色。我不知道如何正确声明它们，该怎么做？
我在Chrome控制台中收到以下消息：
vue.js：597 [Vue警告]：“数据”选项应该是一个在组件定义中返回每个实例值的函数。警告@ vue.js：597
vue.js：597 [Vue警告]：属性或方法“ bga”，“ bgb”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。请参阅：https : //vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
ColorPage.js
const ColorPage = {
props:
['bga', 'bgb'],
data: {
bga: {
backgroundColor: ''
},
bgb: {
backgroundColor: ''
}
},
template: `
<div id="middle">
<label id="colorLabel"><h2>'Change Colors By Typing Their Names:'</h2></label>
</br>
<input type="text" class="colorInput" v-on:input="bga.backgroundColor = $event.target.value" placeholder="here...">
</br>
<input type="text" class="colorInput" v-on:input="bgb.backgroundColor = $event.target.value" placeholder="... and here!">
</div>
`
,
};
export default ColorPage
这应该用于更改“容器” div和“顶部” div的颜色：
Index.html
<div id="container" v-bind:style="bga">
<div class="top" v-bind:style="bgb"> …推荐指数
解决办法
查看次数
为Bootstrap 4表创建具有边框半径的边框
我目前正在改进Bootstrap 4中表的设计。由于它是Node应用程序，因此我们选择使用把手（.hbs）。使用CSS可以更改表格的宽度，但是我无法创建边框或圆角来改善设计。我正在使用来自https://cdn.datatables.net/的 CDN， 我不确定它是否以任何方式影响到此。
为什么它没有按预期工作？使用车把时是否必须编写CSS有所不同，还是代表我一些更简单的错误？
我有点头。但是我将Bootstrap和jQuery的CDN省略了：
HBS /（HTML）
<!-- DataTables CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<!-- JS -->
<script src="../public/javascripts/dataTables.js"></script>
<title>Continuous integration Test Results</title>
</head>
<body id="resultsPage" onload>
<header>
</header>
<main>
<div class="container-fluid">
<div id="resultsTable">
<div class="table-responsive">
<table class="table table-striped table-sm table-bordered">
<thead id="semiBlackHead">
<tr>
<th class="col-md-5ths col-xs-6">Project</th>
<th class="col-md-5ths col-xs-6">Last push</th>
<th class="col-md-2ths col-xs-6">Bugs</th>
<th class="col-md-2ths col-xs-6">Style errors</th>
<th class="col-md-5ths col-xs-6">Details</th>
</tr>
</thead>
<tbody …推荐指数
解决办法
查看次数