Vue基础–v-model表单

v-model的基本使用

  基本使用
  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 手动实现双向绑定 -->
    <!-- <input type="text" :value="message" @input="inputChage" v-model:message> -->
     <!-- v-model实现双向绑定 -->
    <!-- <input type="text" v-model="message"> -->
    <!-- <h2>{{message}}</h2> -->
    <!-- 作用 -->
    <!-- 实现登录功能 -->
     <label for="useName">
      用户名:<input type="text" placeholder="请输入用户名" v-model="useName" id="useName">
     </label>
     <label for="passWord">
      密码:<input type="password" placeholder="请输入密码" v-model="passWord" id="passWord">
    </label>
    <button @click="login">登录</button>
  </div>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    // 创建app
    const app = Vue.createApp({
      data(){
        return{
          message:"Hello Vue",
          useName:"",
          passWord:"",
        }
      },
      methods:{
        inputChage(event){
          this.message = event.target.value
        },
        login(){
          if(this.useName==="admin"&&this.passWord==="123456"){
            console.log("登录成功")
          }
          else{
            console.log("登录失败")
          }
        }
      }
    })
    // 挂载app
    app.mount("#app")
  </script>
</body>
</html>

v-model的原理

v-model绑定textarea

v-model绑定checkbox

v-model绑定radio

v-model绑定select

v-model的值绑定

    <div id="app">
   <select multiple size="3" v-model="fruits">
    <option v-for="item in allfruits" 
            :key="item.value" 
            :value="item.value">{{item.text}}</option>
   </select>
   <h2>{{fruits}}</h2>
  </div>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    // 创建app
    const app = Vue.createApp({
      data(){
        return{
          allfruits:[{value:"apple",text:"苹果"},{value:"orange",text:"橘子"},{value:"banana",text:"香蕉"}],
          fruits:[]
        }
      },
    })
    // 挂载app
    app.mount("#app")
  </script>

v-model修饰符- lazy

v-model修饰符- number

v-model修饰符- trim

v-mode组件上使用

   <div id="app">
    <!-- 1.lazy:只有在提交时（比如回车）才会触发 -->
     <input type="text" v-model.lazy="message">
     <h2>message:{{message}}</h2>
     <hr>
     <!--2.number:自动将内容转化成数字 -->
     <input type="text" v-model.number="counter">
     <h2>{{counter}}---{{typeof counter}}</h2>
     <!--  -->
     <input type="number" v-model="counter2">
     <h2>{{counter2}}---{{typeof counter2}}</h2>
     <hr>
     <!-- 3.trim:去除首尾空格 -->
      <input type="text" v-model.trim="content">
      <h2>content:{{content}}</h2>
      <!-- 4,同时使用多个修饰符 -->
      <input type="text"  v-model.lazy.trim="content">
      <h2>content:{{content}}</h2>
  </div>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    // 创建app
    const app = Vue.createApp({
      data(){
        return{
          message:"Hello Vue",
          counter:0,
          counter2:0,
          content:""
        }
      }
    })
    // 挂载app
    app.mount("#app")
posted @ 2024-10-29 20:31  韩德才  阅读(16)  评论(0)    收藏  举报