vue表单各控件绑定案例使用

最新推荐文章于 2022-10-30 22:33:39 发布
最新推荐文章于 2022-10-30 22:33:39 发布
阅读量578 收藏 8
点赞数 2
分类专栏： 前端 文章标签： vue javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CharLINHeng/article/details/106912697
版权
javaScript过滤器使用:

​ 对数组的元素进行过滤，使用array.filter(function(n){return true})来进行实现，代码如下：

v-model

常用作表单的控件，对其进行双向绑定

在这里插入图片描述

案例: 在输入框中输入信息，同时在下面的文本输入中显示输入的内容

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <input type="text" v-model="msg">
        <textarea name="" id="" cols="30" rows="10">{{msg}}</textarea>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            msg: ""
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行如下:

在这里插入图片描述

event的target.value

上面的双向绑定，也可以使用另外一种方法，在监听函数中，使用event.target.value来获取监听对象的值。代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <input type="text" v-on:input="handle($event)">
        <textarea name="" id="" cols="30" rows="10">{{msg}}</textarea>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            msg: ""
        }
        ,methods:{
            handle(e){
                this.msg = e.target.value;  
            }
        }
        ,computed: {
        }
    })

</script>

运行结果:

在这里插入图片描述

v-model结合ratio单选框使用

案例： 使用v-model来让用户选择性别，并且实时进行打印选择的值.

现在有个案例，v-model绑定radio标签，来监听用户勾选的值,代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <div>
            <h3>请问您的性别是?</h3>
            <div>
                <!-- 实际上，只要您绑定了v-model,不写name是一样的结果 -->
                <input type="radio" value="1" name="sexs" v-model="sex">男
                <input type="radio" value="0" name="sexs" v-model="sex">女
                <input type="radio" value="2" name="sexs" v-model="sex">未知
            </div>
            <a>{{sex_}}</a>
        </div>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            msg: ""
            ,sex: ""
            ,sex_: ""
        }
        ,methods:{
        }
        ,watch: {
            sex(){
                let sexName ="男孩子";
                if(this.sex == 0){
                    sexName = "女孩子"
                }else if(this.sex == 2){
                    sexName = "未知物种";
                }
                this.sex_ = "您选择的性别是:"+sexName;
            }
        }
        ,computed: {
        }
    })

</script>

运行结果如下：

在这里插入图片描述

v-model结合checkbox使用

案例：使用v-model模仿用户勾选游戏协议步骤：

​ v-model监听checkbox，现在让我们来看看单个复选框的情况：

当单选框的使用情况，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <div>
            <h3>点击同意协议即代表您同意用户协议</h3>
            <div>
               <label for="liense">同意游戏协议</label>
               
               <input type="checkbox" id="liense" v-model="agree">
            </div>
            <button @click="show" :disabled="!agree">下一步</button>
            <br>
            <a v-if="!agree">请勾选同意协议进行下一步</a>
            <a v-if="agree">可以进行下一步了</a>
        </div>
    </div>  
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            msg: ""
            ,agree: false
        }
        ,methods:{
            show(){
                alert("可以进行下一步了！");
            }
        }
        ,computed: {
        }
    })

</script>

运行效果如下;

在这里插入图片描述

案例： 使用v-model，用户对自己喜欢的兴趣爱好进行勾选[多个爱好]，并实时输出用户选择的爱好:

多个checkbox情况，勾选你喜欢的爱好兴趣。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <div>
            <h3>请选择您的爱好</h3>
            <div>
               <input type="checkbox" name="h" value="篮球"  v-model="hobby">篮球
               <input type="checkbox"  name="h" value="足球" v-model="hobby">足球
               <input type="checkbox"  name="h" value="月球" v-model="hobby">月球
               <input type="checkbox" name="h" value="板球"  v-model="hobby">板球
               <input type="checkbox" name="h" value="网球"  v-model="hobby">网球
            </div>
            <br>
            您喜欢的是
            <a>:{{hobby}}</a>
        </div>
    </div>  
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            hobby: []
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wIKu0ecu-在这里插入图片描述

v-model结合select的使用:

​ 现在有个案例，现在要让用户选择用户的爱好，使用v-model来解决。

​ 也是分两种情况，第一种是选择一个值:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <div>
            <h3>请选择您的爱好</h3>
            <div>
                <select name="fruits" id="fruits" v-model="selects">
                    <option v-for="(item,index) in options" :value="item">{{item}}</option>
                </select>
            </div>
            <br>
            您选择的水果是:
            <a>:{{selects}}</a>
        </div>
    </div>  
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            options:["苹果","香蕉","黄瓜","百香果","荔枝","芒果","李子","西瓜"]
            ,selects: []
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果如下:

在这里插入图片描述

可以选择多个值的情况:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <div>
            <h3>请选择您的爱好</h3>
            <div>
                <select name="fruits" id="fruits" v-model="selects" multiple>
                    <option v-for="(item,index) in options" :value="item">{{item}}</option>
                </select>
            </div>
            <br>
            您选择的这些水果是:
            <a>:{{selects}}</a>
        </div>
    </div>  
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            options:["苹果","香蕉","黄瓜","百香果","荔枝","芒果","李子","西瓜"]
            ,selects: []
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果:

在这里插入图片描述

v-model结合修饰符的使用

案例：

修饰符名称作用
lazy名为懒惰，就是不会实时更新双向绑定的另外一个值。
number让用户输入数字时，他自动解释绑定的变量类型
trim左右两边的空格。这个简单

修饰符lazy使用代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <div>
            <h3>请选择您的爱好</h3>
            <div>
                <input type="text" v-model.lazy="message" >
            </div>
            <br>
            <a>{{message}}</a>
        </div>
    </div>  
</body>![q6](C:\Users\xiaoc\Desktop\一些杂文件\q6.gif)
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            message: "Hi"
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果如下：

在这里插入图片描述

惊讶的发现，当给v-model加了lazy属性后，数据的双向绑定不会随着我们的输入而同时更新数值，而是当我们离开输入框焦点后，双向绑定的值才会同时更新。

下面来使用number属性:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
    <div id="calc">
        <div>
            <h3>请选择您的爱好</h3>
            <div>
                <input type="text" v-model.number="message" >
            </div>
            <br>
            <a>绑定的变量的数据类型:{{typeof message}}</a>
        </div>
    </div>  
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            message: "Hi"
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果如下：

在这里插入图片描述

Vue组件化的实现和使用步骤

在这里插入图片描述

在这里插入图片描述

注册组件的基本步骤
  1. 创建组件构造器
  2. 注册组件
  3. 使用组件

在这里插入图片描述

码农藏经阁
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-model的实例
qq_36981190的博客
09-14 367
一、v-model的基础用法 用在input标签，input标签类似子组件 button事件修改父组件的message值，子组件input的框里的内容会发生改变； 在input（子组件）框里改变输入值，父组件的message值也发生改变； <template> <div> <button @click="changeInput">changeInput</button> <input v-model="message" placeholder=
事件修饰符、V-model指令，附加经典实例
qq_61902168的博客
04-28 360
详解v-model指令
v-model双向数据绑定小案例 (工作中经常用到)
老段的CSDN的博客
10-30 447
表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成。v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。是Vue框架的一种内置的API指令。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
Vue中v-model的使用及案例
月光晒了很凉快的博客
09-03 2143
v-model 是 Vue 提供的一个语法糖，它是 value 值和事件的结合体，它会根据不同的表单项，来选择执行不同的事件。它的作用是，通过和表单元素绑定，实现双向数据绑定，通过表单项可以更改数据。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源，应该在 data 选项中声明初始值。在没有使用v-model指令时，我们通过data数据控制表单项中的值，还是麻烦的，需要绑定属性和事件来完成。 使用 v-model 指令
v-model的双向数据绑定实现原理（附：案例和项目实例）
热门推荐
您的博客
03-11 1万+
一. 前言。 相信对使用vue框架的童靴来说，v-model的使用都能信手沾来，熟悉的不能再熟悉，也都知道v-model其实是个语法糖。不过其究竟是怎么实现的双向数据绑定，很大一部分童靴还是心存疑虑。本文就根据最简单的案例和基于实际项目中最常用的实例来从两个角度讲解v-model的前世今生。 二. v-model的前世今生。 目前的几大主流MVC(VM)框架都实现了单向数据绑定。简而言之，vue中的v-model无非就是在单向数据绑定的基础上给对应表单元素（input、select等）添加了(in
Vue表单控件绑定图文详解
01-19
Vue 表单控件绑定的实现，具体可以通过以下步骤操作来实现。 1、基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-model 不过是语法糖，...
Vue表单控件数据绑定方法详解
01-19
可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value...
Vue 表单控件绑定的实现示例
08-29
Vue 表单控件绑定的实现示例 在 Vue 中，表单控件绑定是通过 v-model 指令实现的，它可以在表单控件元素上创建双向数据绑定。根据控件类型，v-model 会自动选取正确的方法更新元素。 基础用法 v-model 可以用来...
vue v-model表单控件绑定详解
08-30
主要为大家详细介绍了vue v-model表单控件绑定的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue中v-model结合radio类型
科技向善
12-27 1235
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 原始写法是v-model='sex...
VUE v-model表单数据双向绑定完整示例
10-17
主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下
Vue.js 表单控件绑定
shi_zi_183的博客
01-10 1017
Vue.js 表单控件绑定 在Web应用中，我们经常会使用表单向服务端提交一些数据，而通常也会在表单项中绑定一些如input、change等事件对用户输入地数据进行校验、更新等操作。在Vue.js中、我们可以使用v-model指令同步用户输入的数据到Vue实例data属性中，同时会对radio、checkbox、select等原生表单组件提供一些语法糖使表单操作更加容易。 基本用法 text 设置文本框v-model为name <!DOCTYPE html> <html lang="en"
VUE v-model实例
aurora_yy的博客
10-31 489
<h1>v-model实例</h1> <hr> <div id="app"> <p>原始文本信息：{{message}}我是你大爷</p> <h3>文本框</h3> <!-- 修饰符演示: 1.lazy失去输入框焦点时才同...
v-model使用案例
多哥仁慈的骆驼
12-09 293
代码： <html> <head> <script type="text/javascript" src="../js/vue.js"></script> <title>vue的值绑定、v-model修饰符</title> </head> <body> <!-- v-model使用案例 ...
vuejs表单控件绑定
jessionlin的博客
03-06 872
一、基础语法vuejs中用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但要注意的是v-model仅仅是语法糖，它只负责监听用户的输入时间一更新数据，并特别处理一些极端的例子。注：1.·v-model`并不关心表单控件初始化所生成的值。因为它会选择Vue实例数据来作为具体的值2.当控件有多种语言的需求时，v-model不会因为语言的改变而更新，在这
v model绑定html,vue v-model表单控件绑定的实例教程
weixin_35728216的博客
07-07 497
这篇文章主要为大家详细介绍了vue v-model表单控件绑定的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下v-model 指令在表单控件元素上创建双向数据绑定，下面一一进行示例解释。1、v-model 双向绑定文本Message is: {{ message }}var vm = new Vue({el:"#app",data: {message: '绑定文本'}})输出结果：2、...
Vue事件绑定（非常详细哦~）
weixin_46370867的博客
01-19 3309
下面是对Vue中事件绑定的整理，希望可以帮助到有需要的小伙伴~ 事件绑定 vue如何处理事件 v-on指令用法 <input type= ‘button”v-on:click="num++'/> v-on简写形式 <input type= ‘button'@click='num++/> 事件函数的调用方式 直接绑定函数名称 <button v-on :click（事件类型）='say（方法名）'>Hello</button>
vue双向数据绑定
最新发布
05-27
Vue双向数据绑定是Vue框架的核心特性之一，它可以让数据和视图保持同步。当数据发生变化时，视图会自动更新，反之亦然。在Vue中，通过v-model指令可以实现双向数据绑定。v-model指令用于在表单控件和Vue实例之间建立双向数据绑定，它会根据表单控件类型自动选取正确的方式来更新元素的值。例如，对于<input>元素，v-model会监听input事件并同步数据；对于<textarea>元素，v-model会监听input或change事件并同步数据。在使用v-model指令时，需要将数据绑定到Vue实例的data中，这样才能实现双向数据绑定。例如，要将一个文本框的值绑定到Vue实例的message属性上，可以使用以下代码： ``` <input type="text" v-model="message"> ``` 在Vue实例中，定义message属性并初始化为一个字符串，即可实现双向数据绑定： ``` new Vue({ data: { message: 'Hello Vue!' } }); ``` 这样，当用户在文本框中输入内容时，message属性的值会自动更新，反之亦然。这就是Vue双向数据绑定的基本使用方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值