Hahaha???

Vue3表单

文章目录

Vue3表单
- 1. 概念
- 2. 输入框
- 3. 复选框
- 4. 单选按钮
- 5. select下拉列表
- - 5.1 下拉列表单选
  - 5.1 下拉列表多选时绑定到数组
  - 5.3 使用 v-for 循环输出选项
- 6. 值绑定
- 7. 修饰符
- - 7.1 .lazy
  - 7.2 .number
  - 7.3 .trim

Vue3表单

1. 概念

可以用 v-model 指令在表单、及等元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

  text 和 textarea 元素使用 value 属性和 input 事件；
  checkbox 和 radio 使用 checked 属性和 change 事件；
  select 字段将 value 作为属性并将 change 作为事件。

2. 输入框

input 和 textarea 元素中使用 v-model 实现双向数据绑定：
注意：在文本区域 textarea 插值是不起作用，需要使用 v-model 来代替

textarea 是多行文本输入


<textarea>{{ text }}textarea>


<textarea v-model="text">textarea>

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 输入框title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script>
head>
<body>

<div id="app" class="demo">
    
    <p>input元素：p>
    <input v-model="message1" placeholder="编辑我">
    <p>input表单输入消息为：{{ message1 }}p>


    <p>textarea元素p>
    <textarea v-model="message2" placeholder="多行文本输入...">textarea>
    <p>textarea输入的表单消息为：p>
    <p style="white-space: pre">{{ message2 }}p>
div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                message1: '',
                message2: '比亚迪官网\r\nhttps://www.bydglobal.com/cn/index.html'
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 中
    Vue.createApp(HelloVueApp).mount('#app')
script>
body>
html>

页面效果：

3. 复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

复选框的双向数据绑定

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 输入框title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script>
head>
<body>

<div id="app" class="demo">

    <p>单个复选框：p>
    <input type="checkbox" id="check" v-model="checked">
    <label for="check">{{ checked }}label>


    <p>多个复选框p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runooblabel>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Googlelabel>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">Taobaolabel>
    <br>
    <span>
        选择的值为：{{ checkedNames }}
    span>
div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                checked: false,
                checkedNames: []
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 中
    Vue.createApp(HelloVueApp).mount('#app')
script>
body>
html>

页面效果：

4. 单选按钮

单选按钮的双向数据绑定：

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 单选框title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script>
head>
<body>

<div id="app" class="demo">

    <p>单选框：p>
    <input type="radio" id="runoob" value="Runoob" v-model="picked">
    <label for="runoob">Runooblabel>
    <br>
    <input type="radio" id="google" value="Google" v-model="picked">
    <label for="google">Googlelabel>
    <br>
    <input type="radio" id="taobao" value="Tabobao" v-model="picked">
    <label for="taobao">Taobaolabel>
    <br>
    <span>
        选择的值为：{{ picked }}
    span>
div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                picked: 'Runoob'
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 中
    Vue.createApp(HelloVueApp).mount('#app')
script>
body>
html>

页面效果：

5. select下拉列表

5.1 下拉列表单选

下拉列表的双向数据绑定

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 下拉列表title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script>
head>
<body>

<div id="app" class="demo">

    <p>下拉列表：p>
    <select v-model="selected" name="site">
        <option value="">选择一个网站option>
        <option value="www.runoob.com">Runooboption>
        <option value="www.google.com">Googleoption>
        <option value="www.taobao.com">Taobaooption>
    select>
    <br><br>
    <span>
        选择的值为：{{ selected }}
    span>
div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                selected: ''
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 中
    Vue.createApp(HelloVueApp).mount('#app')
script>
body>
html>

页面效果：

5.1 下拉列表多选时绑定到数组

多选时在select 标签后使用multiple