v-model原理 与radio checkbox使用 

最新推荐文章于 2022-08-03 17:07:45 发布
最新推荐文章于 2022-08-03 17:07:45 发布
阅读量309 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingge_nihao/article/details/106609691
版权

<!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>Document</title>

</head>

 

<body>

    <div id="app">

        <!--v-model  结合表单实现双向绑定-->

       <!-- <input type="text" v-model = "message"> -->

       <!-- 

           原理相当于 1.给input动态绑定了value属性

           2.监听用户输入的input事件

        -->

        <form>

          <input type="text" :value="message" @input="input">

          <input type="text" :value="message" @input="message = $event.target.value">

          <p>{{message}}</p>

        </form>

 

        <!--1. v-model 与 radio类型使用 -->

       <label for="male">

           <input type="radio" v-model="sex" id="male"  value="男">男

       </label>

       <label for="female">

           <input type="radio" v-model="sex" id="female" value="女">女

       </label>

       <h3>您选择的是：{{sex}}</h3>

 

       <!-- 

           2.v-model 与checkbox使用 

                1.checkbox单选框 

                2.checkbox多选框

        -->

        <form>

            <label for="agree">

                <input type="checkbox" v-model="isAgree" id="agree" value="">同意协议

            </label>

            <p>您选择的是：{{isAgree}}</p>

            <button :disabled = "!isAgree">下一步</button>

        </form>

       <form>

            <input type="checkbox" v-model="hobbies" value="Bike">Bike

            <input type="checkbox" v-model="hobbies"  value="Car"> car

            <input type="checkbox" v-model="hobbies"value="乒乓球">乒乓球

            <input type="checkbox"v-model="hobbies"  value="足球"> 足球

 

            <p>您选择的是：{{hobbies}}</p>

        </form>

 

        <!-- 3 v-model 与select使用 -->

        <select name="abc" id="" v-model = "fruit">

            <option value="苹果">苹果</option>

            <option value="苹果1">苹果1</option>

            <option value="苹果2">苹果2</option>

            <option value="苹果3">苹果3</option>

        </select>

        <p>您选择的是：{{fruit}}</p>

 

        <!-- 3 v-model 与select使用 -->

        <select name="abc" id="" v-model = "fruits" multiple>

            <option value="苹果">苹果</option>

            <option value="苹果1">苹果1</option>

            <option value="苹果2">苹果2</option>

            <option value="苹果3">苹果3</option>

        </select>

        <p>您选择的是：{{fruits}}</p>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    const app = new Vue({

        el:"#app",

        data:{

            message:"hello vue",

            sex:'男',

            isAgree:false,//单选框

            hobbies:[],//多选框

            fruit:'苹果2',//默认

            fruits:["苹果","苹果1","苹果2","苹果3"]

        },

        methods:{

             input:function(event){

                console.log('=====');

                this.message = event.target.value

            }

        }

    })

</script>

</html>

昵称已被占用了了了了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10 - Vue 学习笔记 - v-model 的使用
m0_53708566的博客
06-13 265
v-model 的使用 表单控件在实际开发中是非常常见的。特别是对于用户数据的提交，需要大量的表单 Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定
vue2.0自定义组件的v-model原理详解，model的定义
tangcc的博客
11-01 5335
以下示例是用单页面的形式写的。 a.vue  // a.vue是父级引用组件b.vue &lt;template&gt; &lt;!-- 这儿是组件的父级，也就是组件的实例。实例本来应该定义事件来监听子组件的一切“异动”， 但v-model呢却是给组件内部加个model:{prop:"自定义",event:"自定义"}来监听子组件的变化 --&gt; &lt;c...
v-model原理，在“radio”、“checkbox”、“select”、修饰符
m0_48639378的博客
08-03 936
v-model原理，在“radio”、“checkbox”、“select”、修饰符
v-model
qq_33879627的博客
09-21 476
（十）v-model 10.1 v-model的基本使用 <div id="app"> <!-- 输入框内容修改，message也修改，修改message，input内容也修改，双向绑定 --> <input type="text" v-model="message">{{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue
vue中关于checkbox数据绑定v-model指令的个人理解
热门推荐
haidizhixin121的博客
06-07 8万+
vue.js未开发者提供了很多便利的指令，其中v-model用于表单的数据绑定很常见，下面是最常见的例子：&lt;div id='myApp'&gt;&lt;input type="text" v-model="msg"&gt;&lt;br&gt;{{msg}}&lt;/div&gt;js里data初始化数据&lt;script src="./js/vue.js&amp
Vue语法原理：v-model实现原理
weixin_42450034的博客
09-07 9010
vue中的v-model能够实现数据的双向绑定，也是vue的最突出的优势，其中的原理其实很简单，主要包括属性绑定和事件监听两部分，废话不多说，先举个v-model实现数据双向绑定的例子： <div id="app"> <p>v-model绑定的数据为：{{value1}}</p> <input type="text" v-model="value1"> </div> <script src="./lib/vue.j
vue中的v-model原理,与组件自定义v-model详解
10-14
在处理多选和单选时，我们可以使用`v-model`配合`<input type="radio">`或`<input type="checkbox">`。比如，以下代码展示了如何用`v-model`实现多选： ```html <ul class="qus-list"> v-for="(item, index) in ...
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
对于`<select>`元素，`v-model`可以与`options`结合使用： ```html <select v-model="selected"> 请选择 <option>Vue.js <option>React <option>Angular 你选择了：{{ selected }} var app = new Vue({...
vue.js使用v-model指令实现的数据双向绑定功能示例
10-18
2. 单选按钮：`<input type="radio" id="one" value="One" v-model="data.sex"/>` 单选按钮通过`v-model`与`data.sex`关联，当选中某个单选按钮时，`data.sex`的值将设置为对应的选择值。 3. 多选按钮：`...
VUE中v-model和v-for指令详解
08-30
需要注意的是，v-model 指令不仅限于输入框，也可以用于其他表单元素，如 checkbox、radio、select 等。 v-for 指令 v-for 指令是 Vue 中的一个列表渲染指令，它用于将数据数组或对象渲染到模板中。v-for 指令的...
Vue.js 中的 v-model 指令及绑定表单元素的方法
10-17
- 在文本输入框上使用 `v-model` 可以实时同步输入框的值与 Vue 实例中的数据。例如： ```html <input type="text" v-model="content" placeholder="请输入"> 输入框：{{content}} ``` 这里的 `v-model` ...
vue中v-model详解
xidongdong1的博客
03-13 6万+
v-model在input元素上时v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，v-model 只是语法糖而已。第一行的代码其实只是第二行的语法糖。&lt;input v-model="sth" /&gt; &lt;input v-bind:value="sth" v-on:input="sth = $event.target.val...
Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用
NanChen的博客
10-21 4443
一、v-model使用原理 v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 先看一下简单的v-model使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model的基本使用</title> <script src="htt
深入理解 v-model 的原理
专注于web前端开发
04-23 1707
v-model即可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况，它都是一个语法糖，最终会生成一个属性和一个事件
v-model的原理与各功能时返回的值
qq_45963949的博客
06-28 1418
众所周知，v-model可以在input表单中实现与data中数据的双向绑定功能。 但其实其原理十分简单，相当于v-bind和两个指令的结合 1.首先实现data中数据在框中值的单项绑定，使用v-bind绑定input中的value属性即可。 2.实现input中的value值实时绑定到message （首先要知道一个知识点，那就是input有一个内部事件叫input事件：用于监听用户现在有没有在输入东西，可以验证一下） 看，这里将常写的click点击事件改为了input事件，然后将此事件指定到val
v-model原理及自定义组件上的实现
衣乌安、随笔
08-12 8271
一提到v-model就会想到数据的双向绑定，但其实现原理又是什么呢？ 在原生表单中： &lt;input type="text" v-model="name"&gt; 相当于：(先给input绑定value属性值为数据name，然后给input绑定input事件将其input的value值赋给数据name &lt;input type="text" :value="name" @inp...
v-model的实现原理
qq_43742385的博客
03-09 2万+
v-model的实现原理 基础用法 v-model 本质上不过是语法糖，可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScri
v-model结合radio类型使用
vfjcgg的博客
06-13 1216
v-model:radio 当存在多个选框时 <div id="app"> <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-
如何理解v-model的实质为语法糖
riddle1981的博客
07-09 1万+
vue的v-model为表单的完成提供了极大的便利，可以进行数据绑定，例如将input框的值和span值绑定，只要重新输入显示值会立即更改。下面我们来分析这一命令是如何实现的。在官方文档中解释这一名令实际仅是一个语法糖。那么首先我们来看看语法糖的概念： 语法糖：指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减...
v-model指令实现原理
最新发布
03-01
4. 对于其他表单元素（如checkbox、radio等），v-model指令会监听change事件，并将选中状态或值更新到绑定的数据上。 5. 在数据更新时，v-model指令会将新的值反映到对应的表单元素上，保持数据和视图的同步。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值