面试题：Vue中如何实现表单双向绑定及简单验证

Question

在Vue项目中，假设我们有一个登录表单，包含用户名和密码字段。请描述如何使用Vue的模板语法实现这两个字段的双向绑定。并且，为用户名添加一个简单的非空验证，当用户未输入用户名时给出提示，你将如何实现？

Answer 1

1. 双向绑定实现：
   • 在Vue的模板中，使用v - model指令来实现双向绑定。假设在data中定义了username和password变量：

   <template>
     <form>
       <label for="username">用户名:</label>
       <input type="text" id="username" v - model="username">
       <label for="password">密码:</label>
       <input type="password" id="password" v - model="password">
     </form>
   </template>
   <script>
   export default {
     data() {
       return {
         username: '',
         password: ''
       };
     }
   };
   </script>
   

2. 用户名非空验证及提示：
   • 可以在模板中添加一个条件渲染来显示提示信息。

   <template>
     <form>
       <label for="username">用户名:</label>
       <input type="text" id="username" v - model="username">
       <div v - if="!username" style="color: red;">用户名不能为空</div>
       <label for="password">密码:</label>
       <input type="password" id="password" v - model="password">
     </form>
   </template>
   <script>
   export default {
     data() {
       return {
         username: '',
         password: ''
       };
     }
   };
   </script>
   

   • 或者，也可以使用计算属性来处理验证逻辑，这样代码结构可能更清晰：

   <template>
     <form>
       <label for="username">用户名:</label>
       <input type="text" id="username" v - model="username">
       <div v - if="isUsernameEmpty" style="color: red;">用户名不能为空</div>
       <label for="password">密码:</label>
       <input type="password" id="password" v - model="password">
     </form>
   </template>
   <script>
   export default {
     data() {
       return {
         username: '',
         password: ''
       };
     },
     computed: {
       isUsernameEmpty() {
         return!this.username;
       }
     }
   };
   </script>