带有数据参数的Vue.js v-show函数

Question

我正在尝试学习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;

    },

赞赏所有提示

Answer 1

这是一个复制你正在尝试的内容的小提琴：https://jsfiddle.net/9wmcz2my/

HTML：

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

JS

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

Answer 2

没有方法的按钮

为了补充现有答案，由于这种情况是一个简单的切换，您可以通过完全删除方法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>

JS

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>

JS

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