第六章 表单与v-model

编辑本文章

6.1  基本用法

　　v-model指令，用于在表单元素上双向绑定数据。在输入框上使用示，输入的内容会实时映射到绑定的数据上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.1  基本用法</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message" placeholder="输入....">
    <p>输入的内容是：{{message}}</p>
</div>
<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            message:""
        }
    })
</script>
</body>
</html>
View Code

　　6.1.1 单选按钮

　　v-bind:checked="布尔值"即可

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>6.2 单选按钮</title>
</head>
<body>
<div id="app">
    <input type="radio" v-bind:checked="picked">
</div>
<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            picked: true
        }
    })
</script>
</body>
</html>
View Code

 　　组合互斥效果，需要使用配合v-model配合input的value选项，当v-model绑定的值和value一样时，选中。

View Code

6.1.2 复选框

单独使用需要和v-model配合使用，单选按钮单独使用只需要v-bind一个布尔值即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.2 复选框</title>
</head>
<body>

<div id="app">
    <input type="checkbox" v-model="checked" id="checked"><label for="checked">选择状态：{{checked}}</label>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    })
</script>
</body>
</html>
View Code

 

组合使用，和单选按钮组合使用一样，需v-model和value配合使用，多个复选框绑定到一个数组类型的数据，当value的值在数组中，则选中该项，这一过程也是双向的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.2 复选框</title>
</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="css">JS</label><br>
    <input type="checkbox" v-model="checked" value="css" id="css"><label for="css">css</label><br>
    <input type="checkbox" v-model="checked" value="html5" id="html5"><label for="html5">HTML5</label><br>
    <p>选中的项有：<b v-if="checked.length>0">{{checked}}</b></p>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            checked: []
        }
    })
</script>
</body>
</html>
View Code

　　6.1.3 下拉选择器

　　单选时，如果option含有value属性，则v-model优先匹配value值，没有则匹配option的text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.3下拉选择</title>
</head>
<body>

<div id="app">
    <select name="" v-model="selected" id="">
        <option value="html">html</option>
        <option>js</option>
        <option value="css">css</option>
    </select>
    <p>选择的项是：{{selected}}</p>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            selected:"",
        }
    })
</script>
</body>
</html>
View Code

多选时，给selected添加multiple选项，同时给v-model绑定一个数组，与复选框类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.3下拉选择</title>
</head>
<body>

<div id="app">
    <select name="" v-model="selected" multiple>
        <option value="html">html</option>
        <option>js</option>
        <option value="css">css</option>
    </select>
    <p>选择的项是：{{selected}}</p>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            selected:[],
        }
    })
</script>
</body>
</html>
View Code

在业务中，option选项常用v-for输出，value和text也用v-bind来动态输出

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>6.1.4 动态输出下拉选择</title>
</head>
<body>
<div id="app">
    <select v-model="selected" multiple>
        <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
    </select>
    <p>选择的项是：{{selected}}</p>
    <script src="../vue.min.js"></script>
</div>


<script type="application/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            selected: [],
            options: [
                {value: "js", text: 'js'},
                {value: "css", text: 'css'},
                {value: "html", text: 'html'},
                {value: "html5", text: 'html5'}
            ]
        }
    })
</script>
</body>
</html>
View Code

6.2  绑定值

 　　用v-bind动态给单选按钮，复选框，下拉选项绑定数据

　　6.2.1 单选按钮

　　在选中时，app.picked===app.value，都是123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.2.1 动态绑定之单选按钮</title>
</head>
<body>

<div id="app">
    <input type="radio" v-model="picked" v-bind:value="value"><label for="">单选按钮</label>
    <p>{{picked}}</p>
    <p>{{value}}</p>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            picked: false,
            value:123
        }
    })
</script>
</body>
</html>
View Code

　　

6.2.2 复选框

　　　　当勾选时，app.toggle===app.value1,未勾选时app.toggle===app.value2

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>6.2.2 动态绑定之复选框</title>
</head>
<body>

<div id="app">
    <input type="checkbox" v-model="toggle" v-bind:true-value="value1" v-bind:false-value="value2"><label for="">复选框</label>
    <p>{{toggle}}</p>
    <p>{{value1}}</p>
    <p>{{value2}}</p>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            toggle: false,
            value1: 'A',
            value2: 'B'
        }
    })
</script>
</body>
</html>
View Code

6.2.3 选择列表

　　　　当勾选时，app.selected是一个object，所以app.selected.number===123

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>6.2.2 动态绑定之选择列表</title>
</head>
<body>

<div id="app">
    <select name="" id="" v-model="selected">
        <option v-bind:value="{number:123}">123</option>
    </select>
    {{selected.number}}
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            selected: ""
        }
    })
</script>
</body>
</html>
View Code

　　　　

6.3  v-model修饰符

　　6.3.1 .lazy

　　　　在输入框中，v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy会转变为在change事件中同步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.3.1 .lazy修饰符</title>
</head>
<body>

<div id="app">
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    })
</script>
</body>
</html>
View Code

6.3.2 .number

可以将输入转换为Number类型，否则输入的虽然是数字，但它的类型其实是string

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.3.1 .number修饰符</title>
</head>
<body>

<div id="app">
    <input type="number" v-model.number="message">
    <p>{{ typeof message }}</p>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:123
        }
    })
</script>
</body>
</html>
View Code

6.3.3 .trim

可以过滤输入首尾空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.3.3 .trim修饰符</title>
</head>
<body>

<div id="app">
    <input type="text" v-model.trim="message">
    <p>-->{{message}}<--</p>
</div>

<script src="../vue.min.js"></script>

<script type="application/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    })
</script>
</body>
</html>
View Code

 

 

 

posted @ 2019-04-28 18:19  丫丫625202  阅读(137)  评论(0)  编辑  收藏  举报