1.4 v-model

最新推荐文章于 2024-08-23 14:24:38 发布
最新推荐文章于 2024-08-23 14:24:38 发布
阅读量263 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43374578/article/details/108799189
版权

一、v-model绑定text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">
    <!-- 1. v-model和text：将输入框中的值和变量动态双向绑定-->
    用户名：<input type="text" v-model="username"><br>
    密码：<input type="text" v-model="password"><br>
    {{username}}---{{password}}
    
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#first",
        data:{
            username: "舒展",
            password: "123456",
        }
    })
</script>
</body>
</html>

二、v-model绑定radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">
    <!-- 1. radio：和Vue 无关
             1.1 type： radio为单选框或者多选框
             1.2 id：   该input框的名称
             1.3 value：该input框的具体值
             1.4 name： 如果多个input为一个name，则可达到互斥效果，不然可多选-->
    <input type="radio" id="male" value="男" name="sz">男<br>
    <input type="radio" id="female" value="女" name="sz">女<br>
     <h2>分割开</h2>

    <!--2. 将input的值 和 对应的Vue的变量的值绑定起来
           2.1 其中animalName在Vue中可以给空值
           2.2 也可以给对应的input中的值-->
    <input type="radio" id="dog" value="狗" name="animal" v-model="animalName">狗<br>
    <input type="radio" id="cat" value="猫" name="animal" v-model="animalName">猫<br>
    {{animalName}}

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#first",
        data:{
            animalName: '狗',
            // animalName: '',
        }
    })
</script>
</body>
</html>

三、v-model绑定checkout

1. 单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">

    <!--1. checkbox作为单选框：
                   一般默认设置为false值，通过点击checkbox来切换对应的值-->
    <input type="checkbox" id="license" v-model="isAgree">同意协议<br>
   <h2>您的选择是{{isAgree}}</h2>

    <!--2. 绑定的变量：为true时候不能点击下一步-->
    <button v-bind:disabled="isAgree">下一步</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#first",
        data:{
            isAgree: false,
        }
    })
</script>
</body>
</html>

2. 多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">

    <!--1. 会将value中的值，赋值给对应的数组-->
    <input type="checkbox" value="篮球" v-model="hobbies">选项一： 篮球<br>
    <input type="checkbox" value="足球" v-model="hobbies">选项二： 足球<br>
    <input type="checkbox" value="乒乓球" v-model="hobbies">选项三： 乒乓球<br>
    <input type="checkbox" value="羽毛球" v-model="hobbies">选项四： 羽毛球<br>
    <input type="checkbox" value="台球" v-model="hobbies">选项五： 台球<br>
    您的爱好是： {{hobbies}}

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#first",
        data:{
            hobbies:[],
        }
    })
</script>
</body>
</html>

四、v-model绑定select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">

    <!--1. 联动下拉框：单选
           1.1.  页面显示值：选项一：游泳
           1.2.  Vue中绑定的值：value对应的值
           1.3.   默认值可以通过vue中绑定的变量指定-->
   <select v-model="hobby">
       <option value="游泳">选项一：游泳</option>
       <option value="唱歌">选项二：唱歌</option>
       <option value="跳舞">选项三：跳舞</option>
       <option value="滑冰">选项四：滑冰</option>
   </select><br>
   您的爱好： {{hobby}}

    <h2>------</h2>


    <!--2. 联动下拉框：多选，可以对应数组 [] 或 ''
               2.1 页面选择 ctrl-->
    <select v-model="hobbies" multiple>
        <option value="游泳">选项一：游泳</option>
        <option value="唱歌">选项二：唱歌</option>
        <option value="跳舞">选项三：跳舞</option>
        <option value="滑冰">选项四：滑冰</option>

    </select><br>
    您的爱好： {{hobbies}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#first",
        data:{
            hobby:'跳舞',
            //hobby:'',
            hobbies: [],
        }
    })
</script>
</body>
</html>

五、v-model常见修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">
    <!--1. lazy： v-model绑定的数据是和输入框同时变化
                  lazy可以使input框输入，失去焦点后才生效-->
   <input type="text" v-model.lazy="message"><br>
    你好：{{message}}<br>


    <!--2. number: 默认的input框对应的age，都会把String类型赋值给对应变量
                   将对应的age字段，规定为number类型-->
    <input type="text" v-model="age"><br>
    年龄:{{age}} {{typeof age}}<br>
    <input type="text" v-model.number="age"><br>
    年龄:{{age}} {{typeof age}}<br>

    <!--3. trim: 去掉两个边的空格
                 若不去掉，通过控制台拿到的数据，就有可能带空格-->

    <input type="text" v-model.trim ="name"><br>
    姓名：{{name}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#first",
        data:{
            message: "Hello World",
            age: 0,
            name: 'shuzhan',
        }
    })
</script>
</body>
</html>
【Vue笔记】Vue中默认插槽slot、具名插槽slot、自定义组件的v-model属性的使用
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
01-25 1348
上一篇文章介绍了Vue中组件的知识（Vue组件介绍），父子组件之间可以传递数据，那能不能传递HTML代码段呢？？？答案是：可以的。这里介绍的插槽slot就是用于向子组件中传递HTML代码段的，slot就相当于是一个占位符，它在子组件中使用【】标签定义，使用的时候，只需要在组件的开始标签和结束标签之间编写代码，这些代码都将被替换到子组件【slot标签】位置。
Multisim12版安装包
08-28
电路仿真必备软件，学习模拟电路，数字电路和单片时候用的，本软件包含汉化包，注册机。亲测可用
DropDownList实现多选功能
tanxd137的专栏
07-14 8108
x
下拉列表怎样同时选择多项不同内容_不同列表的优缺点分析
weixin_39600510的博客
01-29 4230
用户常使用的列表大体分为两种，列表框与下拉列表。列表框包括三个重要组成部分：容器框、项列表和标签，列表框根据 选择类型可以分为4种表现形式单选列表框：使用这种类型的列表框，用户只能从选项列表中选择一项。多选列表框：用户可以通过在单击选项时按住Shift键来选择或取消选择一个或多个选项。带复选框的多选列表框：这种类型的列表框包括让多选功能更加明显的复选框。多选双列表框：...
sublimetext3插件安装_Sublime Text3软件安装包+安装教程
weixin_39637571的博客
11-26 332
点击上面“蓝字”关注，获取更多资源！用心分享良心资源平凡软件库一个分享软件/影视/音乐/网站/教程的公众号星标/置顶公众号?公众号以改版，不再按文章更新时间推送最新资源呢，为了不错过众多良心资源，把公众号设为星标，即可获取每日最新资源推送。平凡软件库Tree hole story由于公众号改版，将不再按时间推送文章，为了能收到来自平凡软件库的每一个暖心问候，可把库库设置为星标关注。正...
产品-Axure9英文版，使用Repeater中继器实现下拉多选框
Blog belong to 二狗
07-14 1980
Axure9英文版，使用Repeater中继器实现下拉多选框
Vue表单元素绑定：v-model 指令
最新发布
pan_junbiao的博客
08-23 1144
在 Web 应用中，通过表单可以实现输入文本、选择选项和提交数据等功能。在 Vue.js 中，通过v-model 指令可以对象表单元素进行双向数据绑定，在修改表单值的同时，Vue 实例中对应的属性值也会随之更新，反之亦然。使用v-model 指令，绑定表单元素：文本框、单选按钮、下拉框、复选框。
vue指令-04：v-model以及记事本案例
yinfanfff的博客
03-05 542
在原教程的前提下我在输入的时候追加了当按下回车键时，触发 add 方法。本文章仅仅是个人学习笔记 无任何其他用途 特此说明。表示监听键盘事件，当键盘按键为回车键时，执行。注：本人是根据黑马程序员的B站教程来学习的，在这个修改后的代码中，
Vue.js-v-model
hxy1625309592的博客
04-24 422
7.1 v-model基本使用 Vue中使用v-model指令来实现表单元素和数据的双向绑定。 案例的解析 当输入框输入内容时，因为input中的v-model绑定了message。所以会实时将输入的内容传递给message，message发生改变。 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。 所以，通过v-model实现了双向的绑定。 <!DOCTYPE html> <html lang="e
org.everit.osgi.bundles.commons-dbcp-1.4-v20140203.zip
10-13
标题中的"org.everit.osgi.bundles.commons-dbcp-1.4-v20140203.zip"是一个开源项目，它包含了Apache Commons DBCP的OSGi封装版本，适用于2014年2月3日的1.4版。Apache Commons DBCP（Database Connection Pool）是...
multisim安装包
03-23
multisim的安装包以及它的汉化破解步骤。。。。。。。。
Axure RP下拉多选框
04-04
使用全局环境变量、动态面板、复选框，利于选中、取消选中来赋值。
Axure RP9实现二级选择框联动 下拉多选框.rp
03-08
Axure RP9实现二级选择框联动，利用全局变量、动态面板、赋值等原理，第一个选择框单选，第二个选择框多选
下拉列表多选2
11-23
下拉列表多选2 我也是优快云 花重金下载的，现在免费上传上来。
multisim12.0
09-03
安装包，只需打开然会安装就可以，最后不到打钩就可以安装multisim12.0
在Excel下拉菜单中编辑多个选择
culiao2169的博客
08-12 1987
在Excel下拉菜单中编辑多个选择 (Edit Multiple Selections in Excel Drop Down) A couple of years ago, I described how you could select multiple items from an Excel drop down list. One of my clients needed that feat...
安装包及教程：仿真工具Multisim12.0 简体中文汉化版 安装包及详细安装教程（含安装包和汉化包百度云盘链接）
C_learnerwj的博客
08-21 3785
安装包及教程：仿真工具Multisim12.0 简体中文汉化版 安装包及详细安装教程（含安装包和汉化包百度云盘链接）目录Multisim12.0 介绍工具安装包分享详细安装教程汉化教程最后说明，码字不易，觉得有帮助可以点个赞~ 目录 Multisim12.0 介绍 Multisim12是美国国家仪器有限公司推出的以Windows为基础的仿真工具，适用于板级的模拟/数字电路板的设计工作。Multisim12.0包含了电路原理图的图形输入、电路硬件描述语言输入方式，具有丰富的仿真分析能力，能够快速、轻松、高效
DropDownList下拉框多选
小草旁的大树
05-03 3255
最近弄完个项目、项目需要支持多选功能、找了很多例子没找到合适的，最后自己开发了个控件： DropDownCheckBoxList 控件继承 DropDownList ； 整个控件由四部分组成：一个文本框、两个图标（向下|向上）、一个隐藏的 DIV 、两个隐藏域。控件示意图 收缩状态： 展开状态：   先介绍些关键属性： 1. Display
【Axure】普通多选下拉列表
ivys52的博客
04-28 2557
可水平滚动查看已选项的普通多选下拉列表。
jQuery-Treeview.js v1.4：免费开源目录树插件
jQuery-Treeview.js插件特别适合在MVC（Model-View-Controller）架构的开发环境中使用，包括ASP.NET MVC。它允许开发者通过简单的配置和API调用，就能展示复杂的层级关系数据。 首先，我们需要了解jQuery的基本概念...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值