关于Vue.js基础部分的个人理解及杂记(v-if, v-else, v-model及修饰符)

本文链接：https://blog.csdn.net/Scorpio_sky/article/details/108286975

本文探讨了Vue.js的基础知识，包括v-if和v-else的使用场景及解决DOM复用问题，v-model的双向绑定原理及其在input、radio和select中的应用，并详细解析了v-model修饰符lazy、number和trim的使用，以及如何结合使用多个修饰符。

摘要由CSDN通过智能技术生成

本篇记录了一些个人对Vue.js基础使用方法的理解及总结，修饰符的部分或许显得不是那么重要，但抱着“或许哪天会用上”的想法，就一并记录了。

1、关于v-if, v-else产生的现象及解决方案

现象：
比如要切换两个input，同样的type，不同的id，不同的placeholder等
但input1里输入了’123’，这时通过v-if, v-else切换至input2，在input1中输入的内容会被保留下来，而不是清空。
- 场景例：

// 1.向这个账号input随便输点内容
<input type="text" id="username" placeholder="用户账号" v-if="isUser">

// 3.原本输入给上面账号input的内容，却保留到邮箱input中了
<input type="text" id="email" placeholder="用户邮箱" v-else>

// 2.点击按钮，切换到邮箱input
<button @click="isUser = !isUser">切换类型</button>

data: {
   
  isUser: true
},

原因：
Vue在进行DOM渲染时，出于性能考虑，会尽可能复用已经存在的元素，而不是去重新创建新元素。
因此在上面的现象中，由于是两个input之间的切换，但只有id和placeholder内容等不同，Vue在dom渲染时，只将不同的部分（id、placeholder）进行替换，而已输入的value值并不会进行操作。

解决方案：
给对应的input添加一个key值，并确保input之间的key值不相同，这样一来 v-if v-else切换时，能确保已输入的value值会进行清空。