javascript - How to optimize this vue component?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <code><template>
<p>
<ul>
<li>帐号 <input type="text" name="user"></li>
<li>密码 <input type="password" name="password"></li>
</ul>
<ul v-if="title == '用户注册'">
<li>确认密码 <input type="password" name="password"></li>
<li>邮箱 <input type="text" name="email"></li>
<li>
<input type="submit" value="注册">
<input v-on:click='change' type="button" value="登录">
</li>
</ul>
<ul v-else>
<li>
<input type="submit" value="登录">
<input v-on:click='change' type="button" value="注册">
忘记密码?
</li>
</ul>
</p>
</template></code>
|
Because v-if must be mounted into the element, although this can achieve switching, the button attribute element feels irregular. Is there any improvement method?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <code><script>
export default{
data () {
return {
title: '用户登录'
}
},
methods: {
change: function () {
this.title = this.title === '用户登录' ? '用户注册' : '用户登录'
}
},
watch: {
title: function () {
this.$store.commit('setValue', {title: this.title})
}
},
created: function () {
this.$store.commit('setValue', {title: this.title})
}
}
</script></code>
|
title is the page title. Although this implements loading and switching titles by default, it feels like the code is redundant. Is there an easy way?
伊谢尔伦2874 days ago490 
