请问这里，我这样写哪里不对呢？这里的methods难道不能这样绑定函数？

Question

<!-- HTML -->
<div id="keyDiv-demo">
    <div>
        <template v-if="loginType==='username'">
            <label>Username</label>
            <input placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </template>
    </div>
    <button v-on:click="changename">Toggle login type</button>
</div>

// 对应的vue
var vueifKey = new Vue({
    el:"#keyDiv-demo",
    data:{
        loginType:'username'
    },
    methods:{
        changename:function(){
            var n = 0;
             n += 1;
            var vm = this;
            if(n%2===0){
                vm.loginType='email'
            }else{
                vm.loginType='username'
            }

        }
    }
})

我想点击button之后 loginType就能改变了，但是写完发现改变不了 又不知道错在哪 那位前辈帮忙看看？

Answer 1

把n放到data里面去

data {
    n: 0
}

Answer 2

题主的目的是实现一个登录框登录类型可更改的组件, 但是绑定函数的实现逻辑有错误:

changename: function () {
    var n = 0;  // 每次调用函数的时候重新初始化
     n += 1;    // 所以n执行到这一步总是1
    var vm = this;
    if(n%2===0){  // 因为n是1 所以n%2总是结果总是1不严格等于0, 恒为假, 执行else部分的代码
        vm.loginType='email'
    }else{
        vm.loginType='username'
    }
}

正确的姿势:

let vueIfKey = new Vue({
  el: "#keyDiv-demo",
  data: {
    loginType: 'username',
    n: 0    // 提取并初始化临时变量0
  },
  methods: {
    changeName: function () {  // 命名风格小驼峰~
      this.n += 1;  // 引用data里面的变量

      // var vm = this; // 没有必要再绑定变量
      if ( n % 2 === 0) {
        this.loginType = 'email';
      } else {
        this.loginType = 'username';
      }
      // 一个更简洁的写法:
      // this.loginType = (0 === n % 2) ? 'email' : 'username';
    }
  }
});

此外, 官网中给出了一个更加简洁的实践, 但是无法保存loginType, 新增类型不方便.¹:

<div id="keyDiv-demo">
    <div>
        <template v-if="loginType">
            <label>Username</label>
            <input placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </template>
    </div>
    <!-- 每次点击, 登录类型置反 -->
    <button v-on:click="loginType = !loginType">Toggle login type</button>
</div>

let vueIfKey = new Vue({
      el: "#keyDiv-demo",
      data: {
        loginType: true  // TRUE代表username登录, FALSE代表email登录
      }
});

---

1. https://cn.vuejs.org/v2/guide...单元素-组件的过渡 ↩

Answer 3

不要在changename中声明n = 0;不然每次都是0开始，不会变。