当前位置：网站首页>v-model

v-model

2022-08-04 01:40:00 【探索前端究极秘法的小牛】

1，v-model的基本使用

        <input type="text" v-model="msg">
        <h2>{
   {msg}}</h2>

v-model 双向绑定只要input框的值发生改变，则h2中的ms的值也会同时发生改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-model 的基本使用 -->
        <input type="text" v-model="msg">
        <h2>{
   {msg}}</h2>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    msg:'猜猜我会怎么变化'
                }
            }
        })
    </script>
</body>

</html>

效果图

2，v-model的底层原理

首先来创建有一个小deom，不用v-model来实现双向绑定

<input type="text"  @input="changeValue"  :value="msg">

底层的原理就是：用到了oninput方法，用户在输入的时候触发，同时用到v-bind来绑定的

    <div id="app">
        <!-- v-model 的原理-->
        <!-- 1.不适用v-model来实现双向绑定   这里利用了oninput方法 -->
        <input type="text"  @input="changeValue"  :value="msg">
       <!-- 底层的原理用到了oninput方法，用户在输入的时候触发，同时用到v-bind来绑定的 -->
        <h2>{
   {msg}}</h2>

    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
             msg:'我可是没有用v-model来实现的哦!'
                }
            },methods:{
                changeValue(event){
                    this.msg=event.target.value
                }
            }
        })
    </script>

3，v-model的修饰符的使用

lazy：默认情况下是实时更新数据加上lazy，从输入框失去焦点按下enter都会更新数据。
number：默认是string类型，使用number复制为number类型。
trim：用于自动过滤用户输入的首尾空白字符

    <h2>v-model修饰符</h2>
    <h3>lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据</h3>
    <input type="text" v-model.lazy="message">
    <div>{
   {message}}</div>
    <h3>修饰符number,默认是string类型，使用number赋值为number类型</h3>
    <input type="number" v-model.number="age">
    <div>{
   {age}}--{
   {typeof age}}</div>
    <h3>修饰符trim:去空格</h3>
    <input type="text" v-model.trim="name">

js部分

  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        age:18,
        name:"ttt"
      },

    })
  </script>

效果图

4， v-model结合select

v-model结合select可以单选也可以多选。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model结合select类型</title>
</head>
<body>
  <div id="app">
    <!-- select单选 -->
    <select name="fruit" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
    </select>
    <h2>你选择的水果是：{
   {fruit}}</h2>

    <!-- select多选 -->
    <select name="fruits" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
    </select>
    <h2>你选择的水果是：{
   {fruits}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        fruit:"苹果",
        fruits:[]
      },

    })
  </script>
</body>

原网站

版权声明
本文为[探索前端究极秘法的小牛]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_52499703/article/details/126139358