vue踩坑之路--点击按钮改变div样式

有时候，我们在做项目的时候，想通过某个按钮来改变某个div样式，那么可以通过以下代码实现：

    
    
    
    
    
    



    


        

            通过点击按钮此处样式会发生改变
        
        

            大家好！ 当按钮被点击时，我会和你捉迷藏哦！
        
        点击改变

    
    

划重点，我们需要给按钮传入一个方法，所以先要通过点击改变里的@click="changeIt">来绑定该按钮，并调用changeIt方法，此外，还需要在你想要改变样式的div里做绑定，即

通过点击按钮此处样式会发生改变

，而想要拉伸div宽度和高度，则需要用到

大家好！ 当按钮被点击时，我会和你捉迷藏哦！

，此时，你已经做好了第一步，即绑定元素，接下来，我们建立参数和方法，实现这一效果，先在data里写入两个参数并给他们赋值isActive: true,，activeDisplay: 'block'；然后，我们来写方法：

methods: {
                changeIt: function() {
                    this.isActive = !this.isActive;
                    if (this.isActive == true) {
                        this.activeDisplay = 'block';
                    } else {
                        this.activeDisplay = 'none';
                    }
                }

            }

然后，让我们来看看效果吧!

好了，现在打开编辑器和浏览器快乐的尝试吧！！！