Vue——表单与v-model

时间：2020-04-12 22:41:00 阅读：63 评论：0 收藏：0 [点我收藏+]

1.基本用法

表单类控件承载了一个网页数据的录入与交互。
vue提供了v-model用于表单类元素上双向绑定数据.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="text" placeholder="输入..."></input>
        <p>输入的内容是：</p>
        <p style="white-space: pre">{{ text }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                text: ‘‘
            }
        })
    </script>
</body>
</html>

在输入框输入的同时，{{ message }}也会实时将内容渲染在视图中。
还可以使用@input来替代v-model。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" @input="handleInput" placeholder="输入...">
        <!--在使用v-model进行中文输入的时候，只有选定中文数据才会更新-->
        <!--如果想实时更新的话可以使用@input,功能与v-model类似-->
        <p>输入的内容是：{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: ‘‘
            },
            methods: {
                handleInput: function (e) {
                    this.message = e.target.value;
                }
            }
        })
    </script>
</body>
</html>

下面是几种常见的使用类型：

1）单选按钮

（1）单独使用

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔值就可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="radio" :checked="picked">
        <label>单选按钮</label>
    </div>
    <script>
        var app = new Vue({
            el: ‘#app‘,
            data: {
                picked: true
            }
        })
    </script>
</body>
</html>

（2）组合使用

如果是组合使用来实现互斥选择的效果就需要v-model配合value来使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</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="html">JS</label>
        <br>
        <input type="radio" v-model="picked" value="css" id="css">
        <label for="html">CSS</label>
        <br>
        <p>选择的项是：{{ picked }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                picked: ‘js‘  //此处设置默认值
            }
        })
    </script>
</body>
</html>

效果：

技术图片

2）复选框

（1）单独使用

复选框单独使用使用时也是使用v-model加上一个布尔值来使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框————单独使用</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="checked" id="checked">
        <label for="checked">选择状态： {{checked}}</label>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                checked: false
            }
        })
    </script>
</body>
</html>

效果：

技术图片

（2）组合使用

组合使用时，也是v-model和value一起，多个勾选框都绑定到同一个数组类型的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框————组合使用</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="checked" value="html" id="html">
        <label for="html">HTML</label>
        <br>
        <input type="checkbox" v-model="checked" value="js" id="js">
        <label for="html">JS</label>
        <br>
        <input type="checkbox" v-model="checked" value="css" id="css">
        <label for="html">CSS</label>
        <br>
        <p>选择的项是：{{ checked }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                checked: [‘html‘]
            }
        })
    </script>
</body>
</html>

效果：

技术图片

3）选择列表

（1）单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="selected">
            <option>html</option>
            <option>JavaScript</option>
            <option>css</option>
        </select>
        <p>选择的选项是：{{ selected }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                selected: ‘‘
            }
        })
    </script>
</body>
</html>

效果：

技术图片

如果<option>含有value属性，v-model就会优先匹配value的值，如果没有就会匹配<option>的text。

（2）多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="selected" multiple>
            <option>html</option>
            <option>JavaScript</option>
            <option>css</option>
        </select>
        <p>选择的选项是：{{ selected }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                selected: ‘‘
            }
        })
    </script>
</body>
</html>

效果：

技术图片

（3）动态输出

在业务中经常使用的是v-for动态输出.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="selected">
            <option v-for="option in options" :value="option.value">
                {{ option.text }}
            </option>
        </select>
        <p>选择的结果是： {{ selected }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                selected: ‘html‘,
                options: [
                    {
                        text: ‘HTML‘,
                        value: ‘html‘
                    },
                    {
                        text: ‘JS‘,
                        value: ‘js‘
                    },
                    {
                        text: ‘CSS‘,
                        value: ‘css‘
                    }
                ]
            }
        })
    </script>
</body>
</html>

效果：

技术图片

2.绑定值

在业务中，有时候需要绑定一个动态的数据，这时候可以使用v-bind来实现.

1）单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="radio" v-model="picked" :value="value">
        <label>单选按钮</label>
        <p>{{ picked }}</p>
        <p>{{ value }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                picked: false,
                value: 123
            }
        })
    </script>
</body>
</html>

效果：

技术图片

2）复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
        <label>复选框</label>
        <p>{{ toggle }}</p>
        <p>{{ value1 }}</p>
        <p>{{ value2 }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                toggle: false,
                value1: ‘a‘,
                value2: ‘b‘
            }
        })
    </script>
</body>
</html>

效果：
技术图片

3）选择列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="selected">
            <option :value="{ number: 123 }">123</option>
        </select>
        {{ selected.number }}
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                selected: ‘‘
            }
        })
    </script>

</body>
</html>

效果：

技术图片

3.修饰符

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

1）lazy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <!--v-model默认事在input事件中同步输入框的数据-->
        <!--.lazy会转变为在change事件中同步-->
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
        <!--message并不是实时改变，而是在失去焦点或者回车时才更新-->
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: ‘‘
            }
        })
    </script>

</body>
</html>

2）number

.number可以将输入转化为number类型。
虽然你输入的是数字，但是程序收到的却是字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="number" v-model.number="message">
        <p>{{ typeof message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: 123
            }
        })
    </script>

</body>
</html>

3）trim

.trim:自动过滤字符串首尾的空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model.trim="message">
        <p>{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: ‘‘
            }
        })
    </script>

</body>
</html>

Vue——表单与v-model

标签：unp sage min 用法转变 checked 结果数据组合

原文地址：https://www.cnblogs.com/yangmingxianshen/p/12687996.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行