vuejs学习总结（五）——表单绑定v-model

最新推荐文章于 2021-05-24 22:26:06 发布

VIP文章原来是小柒

最新推荐文章于 2021-05-24 22:26:06 发布

阅读量260

点赞数

分类专栏：前端学习文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42711899/article/details/105604874

版权

概述

表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单
vue 中使用v-model指令来实现表单元素和数据的双向绑定
案例解析：
- 当我们在输入框中输入内容时，
- 因为Input中的v-model绑定了message,所以会实时的将输入的内容传递给message,mesage发生改变
- 当message发生改变时，因为我们是用来Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变
- 所以，v-model实现了双向的绑定
我们也可以将v-model用于textarea元素

// 绑定textarea元素
  <textarea v-model="message"></teatarea>
    <p>输入的内容是：{
   {
   message}}</p>

v-model的原理

v-model其实是一个语法糖，他的背后本质上包含两个操作：

1、v-bind绑定一个value属性
2、v-on指令给当前元素绑定input事件
所以以下代码其实是相等的：

 <input type="text" v-mpdel="message">
  <input type="text" :value="message" @input="valueChange">
  <input type="text" 
  v-bind:value="message" 
  v-on:input="message=$event.target.value">

v-model：radio

当存在多个单选框

<body>
<div id="app">
  <label for="male">
    <input type="radio" id="male" name="sex" value="男" v-model="sex">男
<!--    name="sex"的作用：只有name值同，两者才是互斥的，在这里name="sex也可以省略"-->
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>

最低0.47元/天解锁文章

原来是小柒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vuejs学习总结（五）——表单绑定v-model

概述表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单vue 中使用v-model指令来实现表单元素和数据的双向绑定案例解析：当我们在输入框中输入内容时，因为Input中的v-model绑定了message,所以会实时的将输入的内容传递给message,mesage发生改变当message发生改变时，因为我们是用来Mustache语法，将message的值...
复制链接

扫一扫