Vue 表单

最新推荐文章于 2024-09-11 08:29:51 发布
最新推荐文章于 2024-09-11 08:29:51 发布
阅读量133 收藏
点赞数
分类专栏： 前端 文章标签： vue 表单
原文链接：https://www.mk2048.com/blog/blog.php?id=h0ajahicj1bb&title=Vue+%E8%A1%A8%E5%8D%95
版权

1、v-model

v-model不再关心初始化的value值。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>购物车示例</title>
    </head>

    <body>
        <div id="app" v-cloak>
            <input type="text" v-model="message" value="122" placeholder="请输入" />
            <p>输入的文本内容是：{{message}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: ''
                }
            })
        </script>
    </body>

</html>

效果：

 

 2、单选

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <input type="radio" v-model="picked" value="html" id="html" />
            <label for="html">HTML</label>
            <br />
            <input type="radio" v-model="picked" value="js" id="js" />
            <label for="js">HTML</label>
            <br />
            <input type="radio" v-model="picked" value="css" id="css" />
            <label for="css">HTML</label>
            <br />
            <p>选择项为：{{picked}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    picked: 'js'
                }
            })
        </script>
    </body>

</html>

3、复选框

（1）单独使用时

v-model绑定布尔值

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <input type="checkbox" v-model="checked"/>js           
            <p>选择项为：{{checked}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    checked: false
                }
            })
        </script>
    </body>

</html>

（2）组合使用

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <input type="checkbox" v-model="checked" value="html" id="html" />html
            <lable for='html'>html</lable>
            <br />
            <input type="checkbox" v-model="checked" value="js" id="js" />js
            <lable for='js'>js</lable>
            <br />
            <input type="checkbox" v-model="checked" value="css" id="css" />css
            <lable for='css'>css</lable>
            <br />
            <p>选择项为：{{checked}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    checked: []
                }
            })
        </script>
    </body>

</html>

4、下拉列表

（1）单选下拉列表

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <select v-model="selected">
                <option value="0">html</option>
                <option value="1">js</option>
                <option value="2">css</option>
            </select>
            <br />
            <p>选择项为：{{selected}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    selected: 0
                }
            })
        </script>
    </body>

</html>

（2）多选下拉列表

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <select v-model="selected" multiple="multiple">
                <option value="0">html</option>
                <option value="1">js</option>
                <option value="2">css</option>
            </select>
            <br />
            <p>选择项为：{{selected}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    selected: []
                }
            })
        </script>
    </body>

</html>

5、修饰符

（1）lazy

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <!--在change中同步-->
            <input type="text" v-model.lazy="message" />
            <br />
            <p>{{message}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: '',

                }
            })
        </script>
    </body>

</html>

 

（2）number

输入转为number类型

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <!--在change中同步-->
            <input type="number" v-model.number="message" />
            <br />
            <p>{{ typeof message}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: 123,

                }
            })
        </script>
    </body>

</html>

（3）trim

去掉输入框的首尾空格

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <!--在change中同步-->
            <input type="text" v-model.trim="message" />
            <br />
            <p>{{message}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: '   5555  66 ',

                }
            })
        </script>
    </body>

</html>

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
vue操作表单
缚己
01-24 334
表单操作 操作文本框 操作文本框使用双向数据绑定来操作文本框中的内容，如下代码所示： <div class="container"> <form action="#" method="POST"> <!-- 双向数据绑定，可以通过 this 获取其中的值 --> <label for="uname"><input v-model="uname" type="text" name="uname"></la
Vue 表单
涛涛的博客
10-05 323
表单 text,password,textarea----->v-model---》value radio,checkbox,select----->v-model checked/v-bind:value 表单修饰符： .lazy:失去焦点（change事件同步）或者回车的时候才会同步数据 .number:变成数值 .trim:去掉前后空格，不会去掉中间空https://www.cnblogs.com/xiaobaiv/p/9153020.
vue表单
这里有草原
02-22 413
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue 测试实例 - 菜鸟教程(runoob.com)&lt;/title&gt; &lt;script src="https://cdn.staticfile.org/vue/2.2.2/vue
Vue入门学习笔记-表单
最新发布
weixin_52937170的博客
09-11 551
vue表单
Vue---表单应用
weixin_51345632的博客
09-04 2036
v-model指令可以在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定，它会忽略所有表单元素的 value、checked、selected以及attribute的初始值而总是将 Vue 实例的数据作为数据来源。所以在写vue表单应用时在vue组件的 data 选项中声明初始值。 常见表单控件： 1. 单行文本框 <inputtype="text"v-model="user.username" placeholder=..
vue 表单验证按钮事件交由父组件触发的方法
12-29
vue 表单验证按钮事件交由父组件触发，不直接再子组件上操作的方法 子组件： //内容部分 <Form ref=formCustom :model=formCustom :rules=ruleCustom :label-width=80> <Input type=text v-model=...
Vue表单实例代码
10-21
在本篇文章中，我们将详细介绍Vue表单实例代码，并对相关知识点进行阐述。 1. Vue.js基本概念 Vue.js采用MVVM（Model-View-ViewModel）模式，开发者只需关注业务逻辑的处理和数据的处理，而无需过多关注DOM操作。...
Vue表单控件绑定图文详解
01-19
Vue 表单控件绑定的实现，具体可以通过以下步骤操作来实现。 1、基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-model 不过是语法糖，...
vue表单：使用Vue.js的表单
02-22
在Vue.js中，表单处理是构建用户交互界面的关键部分。Vue.js是一个轻量级的JavaScript框架，它提供了强大的数据绑定和组件化功能，使得在处理表单时能够实现高效且响应式的用户体验。本文将深入探讨如何在Vue.js中...
Vue基础之表单Form(一)
热门推荐
qq_41720578的博客
04-13 1万+
表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面例子: <div id="app"> <input type="text" v-model="message" placeholder="请输入...."> <p>{{message}}</p> </di
基于 Vue 的表单操作
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
01-18 344
表单案例 成品展示 案例解析 姓名和个人简介(text) *功能一致 都可以选用 input 或者 textarea 都比较不错，之后通过v-model 获取和设置值都比较不错 性别 *选用单选框（radio） v设置一个 v-model 和 value 来区分男和女即可 爱好 *多选框（checkbox） 需要注意的是 设置选中状态时需要使用数组的形式 例如：hobby: [‘1’, ‘2’] 职业 *一个人可以有好多个职业 也可以只有一个职业 所以可以使用单选也可以选择用多选，正因如此
Vue学习系列（十五）：Vue的表单
千里之行，始于足下
06-07 507
在Vue中，v-model可以轻松实现数据的双向绑定，不过除了文本框，文本域等基本的表单元素，其他的表单元素又该怎么实现数据的双向绑定呢？
vue学习笔记-表单
weixin_51250562的博客
05-17 228
<!DOCTYPE html> <html> <head> <title>表单</title> <script src="../js/vue.js"> </script> </head> <body> <div id="root"> <form @submit.prevent="demo"> 账号.
vue表单操作
leechoy
01-16 541
<!-- * @Description: * @Autor: leechoy * @Date: 2022-01-16 18:12:57 * @IDE: Visual Studio Code --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.
Vue基础（六）——表单
pro1822的博客
05-03 6157
Vue基础（六）——表单
Web前端vue必做笔记之一：vue中的表单
qq_42302014的博客
11-04 265
Web前端vue必做笔记之一：vue中的表单 数据双向绑定 通过v-model指令在文本输入框中创建双向数据绑定 <template> <div> <p>vue实现表单</p> <!-- <h1>{{message}}</h1> --> <form @submit.prevent="postData"> <!--prevent 取消表单的默认行为 -->
Vue对表单的操作
海涛高软
11-26 495
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"&...
Vue表单校验简易实现
"这篇文章介绍了一个简单的Vue表单验证实现，通过100行代码即可完成。主要分为两个文件，一个负责逻辑处理，另一个定义校验规则。该验证器的特点是逻辑简洁，代码量小，适合基础需求。" 在Vue开发中，表单验证是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值