表单 - lina2014 - 博客园

表单

可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model会忽略所有表单元素的value、checked、selected属性的初始值而总是将Vue实例的数据作为数据来源。所以需要通过JavaScript在组件的data选项中声明初始值。

v-model在内部为不同的输入元素使用不同的property并抛出不同的事件：
text和textarea元素使用value property和input事件；
checkbox和radio使用checked property和change事件；
select字段将value作为prop并将change作为事件。

1.文本输入

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <input v-model="message" placeholder="edit me">
    <p>message is:{{message}}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: "",
        },
    });
</script>
<style type="text/css">
</style>
</body>
</html>

2.多行文本输入

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    <p style="white-space: pre-line;">{{message}}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: "",
        },
    });
</script>
<style type="text/css">
</style>
</body>
</html>

3.复选框

单个复选框，绑定到布尔值：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            checked: "",
        },
    });
</script>
<style type="text/css">
</style>
</body>
</html>

多个复选框，绑定到同一个数组：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div style="margin-top: 20px;">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            checkedNames: [],
        },
    });
</script>
<style type="text/css">
</style>
</body>
</html>

4.单选按钮

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div style="margin-top: 20px;">
        <input type="radio" id="one" value="one" v-model="picked">
        <label for="one">one</label>
        <input type="radio" id="two" value="two" v-model="picked">
        <label for="two">two</label>
        <br>
        <span>picked : {{ picked }}</span>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            picked: "",
        },
    });
</script>
<style type="text/css">
</style>
</body>
</html>

5.提交表单数据

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    <p style="white-space: pre-line;">{{message}}</p>

    <div style="margin-top: 20px;">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>

    <div style="margin-top: 20px;">
        <input type="radio" id="one" value="one" v-model="picked">
        <label for="one">one</label>
        <input type="radio" id="two" value="two" v-model="picked">
        <label for="two">two</label>
        <br>
        <span>picked : {{ picked }}</span>
    </div>

    <button type="button" @click="submit">提交</button>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: "",
            checkedNames: [],
            picked: "",
        },
        methods: {
            submit: function () {
                console.log(this.message);
                var postObj = {
                    msg: this.message,
                    checkVal: this.checkedNames,
                    pickVal: this.picked,
                };
                console.log(postObj);
            }
        }
    });
</script>
<style type="text/css">
</style>
</body>
</html>

6.选择框

单选

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div style="margin-top: 20px;">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            selected: "",
        },
    });
</script>
<style type="text/css">
</style>
</body>
</html>

多选时 (绑定到一个数组)：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div style="margin-top: 20px;">
        <select v-model="selected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            selected: [],
        },
    });
</script>
<style type="text/css">
</style>
</body>
</html>

7.用 v-for 渲染的动态选项：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学习example</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div style="margin-top: 20px;">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{option.text}}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            selected: 'A',
            options: [
                {text: 'One', value: 'A'},
                {text: 'Two', value: 'B'},
                {text: 'Three', value: 'C'}
            ]
        },
    });
</script>
<style type="text/css">
</style>
</body>
</html>

posted on 2020-07-31 20:22 lina2014 阅读(50) 评论(0) 编辑收藏举报

刷新页面返回顶部

lina2014

表单

导航

公告