我理解如何使用v-bind:class如果我有一个返回true或false的计算函数.
我想知道是否可以使用与所点击的按钮的ID匹配的计算属性以及该按钮的值.因此,单击按钮1我可以获取该按钮的值,并检查它是否与绑定到输入的数据模型的值匹配.
目前,该按钮的值与Vue数据属性同步.
<label v-bind:class="myBtnClass">
<input type="radio" name="button1" id="button1" value="1" v-model="valueOfBtn"> One
</label>
<label v-bind:class="myBtnClass">
<input type="radio" name="button2" id="button2" value="2" v-model="valueOfBtn"> Two
</label>
Run Code Online (Sandbox Code Playgroud)
new Vue({
el: '#app',
data: {
'valueOfBtn': 1
Run Code Online (Sandbox Code Playgroud)
这个位只适用于一个按钮,显然我不想重复这段代码x次.
computed: {
myBtnClass: function () {
var result = [];
if (this.valueOfBtn) == document.getElementById('button1').value.valueOf()))
{
result.push('primary');
}
return result;
Run Code Online (Sandbox Code Playgroud)
提前致谢
将 VuePress 与 Algolia 快速搜索框结合使用。
我在 Algolia 的文档中找不到如何增加下拉列表中显示的结果数量。当前默认为 5。
将 'hitsPerPage: 10' 添加到 config.js 中的 algolia 选项将被忽略。