v-model的使用

已于 2022-02-27 17:00:42 修改
阅读量63 收藏
点赞数
分类专栏： 前端入门学习 文章标签： javascript vue.js 前端
于 2022-02-27 16:20:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coising/article/details/123165580
版权

v-model 与radio结合使用

<!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>
    <style>
        .active{
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <label for="male">
            <!-- 添加name属性 才能做到互斥 -->
            <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>
        <h2>您选择的 {{sex}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                message : 'fff',
                sex : '男'
            }
        })


    </script>
</body>
</html>

v-model与checkbox

<!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>
</head>

<body>
    <div id="app">
        <!-- checkbox单选框 -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>选择是 {{isAgree}}</h2>
        <button :disabled="!isAgree">xiayibu</button>

        <!-- 多选框 -->
        
            <input type="checkbox" value="篮球" v-model="hobbies">lan
            <input type="checkbox" value="zu球" v-model="hobbies">zu
            <input type="checkbox" value="y球" v-model="hobbies">ym
            <input type="checkbox" value="pp球" v-model="hobbies">ppp
            <h2>您的爱好 {{hobbies}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                message : 'fff',
                isAgree: false,  //单选框
                hobbies : []    //多选框
            }
        })

    </script>
</body>
</html>

v-model与select

<!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>
</head>

<body>
    <div id="app">
        <!-- 1. 选择一个 -->
        <select name="abc" id="" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="果国">果国</option>
            <option value="大果">大果</option>
            <option value="小果">小果</option>
            <option value="中果">中果</option>
        </select>
        <h2>选择的是 {{fruit}}</h2>

        <!--2. 多选  按住Ctrl多选-->
        <select name="abc"  v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="果国">果国</option>
            <option value="大果">大果</option>
            <option value="小果">小果</option>
            <option value="中果">中果</option>
        </select>
        <h2>选择的是 {{fruits}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                message : 'fff',
                fruit : '大果', //单选
                fruits : []   //多选
                
            }
        })

    </script>
</body>
</html>

值绑定

<!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>
</head>

<body>
    <div id="app">
        <!-- 值绑定 -->
        <h2>aihao {{hobbies}}</h2>
        <label v-for="item in originHobbies" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
        </label>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                message : 'fff',
                hobbies : [],
                originHobbies : ['ss','sss','ffff']
                
            }
        })

    </script>
</body>
</html>

修饰符

<!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>
</head>

<body>
    <div id="app">
        <!-- 修饰 lazy -->
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>

        <!-- 修饰符number -->
        <input type="number" v-model.number="age">
        <h2>{{typeof age}}</h2>
        <!-- 修饰符trim -->
        <input type="text" v-model.trim="name">
        <h2>shuru {{name}}</h2>

    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                message : 'fff',
                age : 11,
                name : ''
            }
        })

    </script>
</body>
</html>
33的史努比
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
在表单控件如输入框、文本域、单选按钮、复选框等元素上使用`v-model`，可以实现实时更新数据，极大地简化了前端开发的工作流程。 6.1 基本用法 对于最常见的输入框`<input type="text">`，`v-model`的使用方式...
vue中v-model使用方法
irose的博客
05-15 4140
1.v-model在input的下拉框、单选按钮、复选框中的应用 这里有一个值绑定的问题，不管是下拉框或者单选按钮还是复选框，我们都可以在对应的标签内设置value。以下拉框为例，我们在中添加了vulue=“A被选”，当我们选择第一个下拉框A的时候，在selected中的字符串为‘A被选’，如果我们不在中设置value值的话那么selected中的字符串将是中的值‘A’。单选、复选框同理。 下拉框： <!--下拉框--> <div id="app"> <select v-m
vue3【实用教程】v-model（原生标签和组件上使用 v-model ，v-model 参数，绑定多个 v-model ，v-model 内置修饰符，自定义 v-model 修饰符等）
朝阳39的博客
04-18 3746
以为例：自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop，用于获取自定义的修饰符 modelModifiers : {
全网最详细的v-model讲解
热门推荐
zayyo的博客
11-29 15万+
v-model的基本使用 表单提交是开发中非常常见的功能，也是和用户交互的重要手段： 比如用户在登录、注册时需要提交账号密码； 比如用户在检索、创建、更新信息时，需要提交一些数据； 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成： v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定； 它会根据控件类型自动选取正确的方法来更新元素； 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据
vue中v-model使用计算属性
DreamFJ的博客
07-24 1万+
转自：https://blog.csdn.net/qq_34414994/article/details/82688159
【Vue】v-model 的使用
Superman_H的博客
02-01 5246
# 双向绑定 v-model - `v-model:value="值"` 可简写为 `v-model="值"`，用于**双向绑定** \[表单元素] 的信息 - 双向绑定：表单元素的 `value` attribute 的值 ↔ data 中对应的值 - 本质上，v-model 是由 v-bind 配合 input 事件实现的 ① v-bind 绑定 value 属性、② 在 input 事件的回调函数中更新 value 的值 ## 文本 input [text] `
vue3的组件通信&v-model使用
qq_42753983的博客
05-27 1949
再父组件中通过使用:msg='msg'绑定需要传给子组件的属性值，然后再在子组件中用props接收该属性值。在子组件的点击事件中 通过触发父组件中的自定义事件，把想传给父组件的信息以参数形式带过去 父组件便可拿到子组件传过来的值。插槽的基础用法非常简单，只需在 子组件 中使用 标签，就会将父组件传进来的 HTML 内容渲染出来。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。
v-model里使用过滤器
清心
03-22 2万+
点击查看filter文档 文档所述过滤器只能用在v-bind指令和{{}}表达式中，v-model中使用过滤器是一种思维误区。 因为v-model里实现数据显示和存储格式的转换应该是双向的。如下例： computed: { sex: { get: function () { return this.info.sex === 1 ? '男' : this.in...
v-model使用及原理
dayexiaofan的博客
05-22 3175
其他人的文章要么就写的vue2，要么就vue3，这里参照官网和其他博客整理一下。
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
qq_54075517的博客
08-10 4982
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
vue.js指令v-model使用方法
01-21
vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍： v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的...
vue v-model动态生成详解
08-27
Vue V-Model动态生成是 Vue 框架中一种常用的数据绑定方式，但是在某些场景下，使用 V-Model 动态生成时会遇到一些问题，例如在输入框中动态绑定字段名，使用传统的方法 value 动态绑定，并且用子组件绑定向父组件...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1137
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 172
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 155
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 598
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 717
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
v-model使用详解
03-22
使用 v-model 指令可以简化表单元素的操作，提高开发效率。 v-model 指令的使用方法如下： 1. 对于单选框和复选框，v-model 绑定的是选中状态的值。 2. 对于文本框和文本域，v-model 绑定的是输入的值。 3. 对于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值