【问题标题】：Vue.js v-show function with data parameter带有数据参数的 Vue.js v-show 函数
【发布时间】：2016-10-08 11:43:00
【问题描述】：

我正在尝试学习 vue.js 和 javascript，所以对于那些已经走过这条路的人来说这可能很容易......所以请告诉我路......

我想要一个通用的函数来传递参数所以...

在 HTML 中

我有一个带有 div id 参数的函数调用

<button @click="showdiv('user_likes')" type="button" class="btn btn-default">+</button>

在 vue 中，所有 div 元素默认为 false。这是我在 Vue.js 方法中的函数

changediv: function(data){
        data==false ? data=true : data=false;

    },

感谢所有提示

【问题讨论】：

如果你返回一个!data而不是那个条件不是更容易吗？
您将字符串传递给showdiv()，然后测试它是否为布尔值，因此它始终为假。尝试将== 更改为=== 或@phaberest 说使用data = !data
phaberest & @Aron，是的，返回 !data 更容易，Aron 感谢您的详细解释。

标签： vue.js

【解决方案1】：

没有方法的按钮

为了补充现有的答案，由于这种情况是一个简单的切换，您可以通过完全摆脱 showDiv 方法来减少代码量。如果您有更复杂的逻辑，则不应使用它，因为它可能会影响可读性：https://jsfiddle.net/8pLfc61s/

HTML：

<div id="demo">
    <button @click="showParagraph = !showParagraph">Toggle paragraph with button</button>
    <p v-if="showParagraph">Hello!</p>  
</div>

var demo = new Vue({
    el: '#demo',
    data: {
        showParagraph: false
    }
})

带有 v-model 的复选框

另一个很酷的技巧是在 v-model 中使用复选框，尽管在这种情况下标记的数量增加了，所以可能不值得权衡：https://jsfiddle.net/v09tyj36/

HTML：

<div id="demo">

    <label class="button">
      Toggle Paragraph with checkbox
      <input type="checkbox" v-model="showParagraph">      
    </label>

    <p v-if="showParagraph">Hello!</p>  
</div>

var demo = new Vue({
    el: '#demo',
    data: {
        showParagraph: false
    }
})

【讨论】：

【解决方案2】：

这是一个复制您尝试的小提琴：https://jsfiddle.net/9wmcz2my/

HTML：

<div id="demo">
    <button @click="showDiv('showParagraph')">Click me</button>
    <p v-if="showParagraph">Hello!</p>  
</div>

var demo = new Vue({
    el: '#demo',
    data: {
        showParagraph: false
    },
    methods : {
        showDiv: function(param){
       this[param] = !this[param]
    },
    }
})

【讨论】：