Ver—— modelo v

Tabla de contenido

1. Uso básico del modelo v

2. El principio del modelo v.

3. modelo v combinado con tipo de radio

4. modelo v combinado con tipo de casilla de verificación

5. modelo v combinado con select

6. Uso de modificadores del modelo v

1. Uso básico del modelo v

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="message">{
   
   {message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "hello"
    }
  })
</script>
</body>
</html>

Enlace bidireccional del modelo v: cuando el valor del cuadro de entrada cambia, el valor del objeto de mensaje correspondiente también cambiará, modificará el valor del mensaje y el valor de la entrada también cambiará en consecuencia. No importa qué valor se cambie, el otro valor cambiará.

2. El principio del modelo v.

Primero venga una demostración para realizar un enlace bidireccional sin usar v-model.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- $event获取事件对象，$event.target.value获取input值 -->
<!--  <input type="text" :value="message" @input="changeValue($event.target.value)">{
   
   {message}}-->
  <!--事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去-->
  <input type="text" :value="message" @input="changeValue">{
   
   {message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "hello world"
    },
    methods: {
      changeValue(event){
        console.log("值改变了");
        this.message = event.target.value
      }
    }
  })
</script>
</body>
</html>

v-model = v-bind + v-onPara lograr un enlace bidireccional, debe usar v-bind y v- on Pero cambiar el valor de la entrada no cambiará el valor del mensaje. En este momento, se requiere un v-on para vincular un método para escuchar eventos. Cuando el valor de la entrada cambie, asigne el último valor al mensaje. objeto. $eventObtiene el objeto del evento, el objetivo obtiene el dom del objeto monitoreado y el valor obtiene el valor más reciente.

3. modelo v combinado con tipo de radio

Las propiedades del botón de radio nameson mutuamente excluyentes. Si usa el modelo v, puede nameser mutuamente excluyente sin usarlo.

  <div id="app">
    <!-- name属性radio互斥 使用v-model可以不用name就可以互斥 -->
    <label for="male">
      <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    </label>
    <div>你选择的性别是：{
   
   {sex}}</div>

  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        sex:"男"
      },

    })
  </script>

El atributo "sexo" está vinculado al modelo v y el valor inicial es "masculino". Después de seleccionar una mujer, el atributo "sexo" se convierte en "femenino", porque en este momento es un enlace bidireccional.

4. modelo v combinado con tipo de casilla de verificación

La casilla de verificación se puede combinar con v-model para crear cuadros de selección única o cuadros de selección múltiple.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--单选框-->
  <h2>单选框</h2>
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h3>您的选选择是：{
   
   {isAgree}}</h3>
  <button :disabled="!isAgree">下一步</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isAgree: true
     
    }
  })
</script>
</body>
</html>

opción multiple

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--多选框-->
  <h2>多选框</h2>
  
    <input type="checkbox" name="hobby" value="篮球"  v-model="hobbies">篮球
    <input type="checkbox" name="hobby" value="足球"  v-model="hobbies">足球
    <input type="checkbox" name="hobby" value="羽毛球"  v-model="hobbies">羽毛球
    <input type="checkbox" name="hobby" value="乒乓球"  v-model="hobbies">乒乓球
  <h2>你的爱好是：{
   
   {hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: []

    }
  })
</script>
</body>
</html>

vinculación de valores

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--多选框-->
  <h2>多选框</h2>
  <label :for="item" v-for="(item,index) in hhobbies" :key="index">
    <input type="checkbox" name="hobby" :value="item" :id="item" v-model="hobbies">{
   
   {item}}
  </label>
  <h2>你的爱好是：{
   
   {hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: [],
      hhobbies: ["篮球","足球","乒乓球","羽毛球"]

    }
  })
</script>
</body>
</html>

La casilla de verificación se combina con v-model para realizar el botón de opción, y la variable definida isAgreese inicializa en falsey el valor de la casilla de verificación en la que se hace clic también truees .isAgreetrue

La casilla de verificación combina el modelo v para implementar un cuadro de selección múltiple, define un objeto de matriz hobbiespara almacenar pasatiempos y se hobbiesvinculará al objeto de la casilla de verificación en dos direcciones. En este momento, si se selecciona un cuadro de selección múltiple, se seleccionará uno más verdadero. se agregará y hobbiesse agregará un objeto.

5. modelo v combinado con 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>

El modelo v combinado con select puede ser de selección única o múltiple.

6. Uso de modificadores del modelo v

<!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修饰符</title>
</head>
<body>
  <div id="app">
    <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">

  </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        age:18,
        name:"ttt"
      },

    })
  </script>
</body>
</html>

lazy: De forma predeterminada, los datos se actualizan en tiempo real. Además lazy, cuando se pierde el foco del cuadro de entrada, los datos se actualizarán después de presionar Enter.

number: El valor predeterminado es el tipo de cadena, use numberla copia como tipo de número.

trim: Se utiliza para filtrar automáticamente los caracteres en blanco iniciales y finales ingresados por el usuario.

1. Uso básico del modelo v

2. El principio del modelo v.

3. modelo v combinado con tipo de radio

4. modelo v combinado con tipo de casilla de verificación

5. modelo v combinado con select

6. Uso de modificadores del modelo v

Supongo que te gusta