引导模式的不vuejs

Question

显示我刚开始学Vuejs，我现在面临的问题与引导模式，怎么这其实与vuejs

我很困惑，我从jQuery的背景的作品，这是很简单的用jQuery但Vue公司的js似乎不容易与莫代尔等这样的引导部件

<button class="btn btn-primary" @click="openModal = true"></button> 

<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>This is a small modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 


export default { 
    data() { 
    return { 
     openModal : false; 
    } 
    }, 
methods: { 
    openModel : function(){ 
     openModal = true; 
    } 
    } 
} 

我已经尝试其他几个，但似乎没有任何工作，能有人请解释它是如何将工作

Answer 1

您模态元素，请使用v-if="openModal"。如果您只想隐藏并显示没有其他操作的模式，则不需要在方法属性中创建函数。你的openModal = true就够了。但如果你想这样做的方法，你应该写这样的事情：

methods: { 
 
    showModal: function() { 
 
    this.openModal = true 
 
    } 
 
}

记住，如果你调用Vue的实例的方法或属性，你应该使用this关键字。