时间戳

首页 > 解决方案 > 变量状态未绑定

vue.js - 变量状态未绑定

问题描述

<button id="btn1"> Button 1 </button>
<button id="btn2" v-if="state == 2"> Button 2 </button>

 export default {
        data() {
            return {
                emailPreferences: {
                    isLoading: false
                },
                state: 0 
            }
        },
       methods: {

        OnBtn1Click() {
            this.state = 2;
        }
      }
  }

当我单击按钮 1 时，我试图显示按钮“btn2”。但它似乎不起作用。

标签： vue.jsvuejs2

解决方案

只需将@skirtle 的评论放在 awnser 中即可：

new Vue({
  el: '#app',
  data: {
    state: 0 
  },
  methods: {
    OnBtn1Click() {
      this.state = 2;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="OnBtn1Click" id="btn1"> Button 1 </button>
  <button id="btn2" v-if="state == 2"> Button 2 </button>
</div>

您的代码逻辑很好，只是按钮缺少“onclick”属性

推荐阅读