表單與v-model

時間 2019-12-08

標籤表單 model 欄目 HTML 简体版

原文原文鏈接

基本用法

vue.js提供了v-model指令，用於在表單類元素上雙向綁定數據，例如在輸入框上使用，輸入的內容會實時映射到綁定的數據上javascript

example1：修改input框內容，message會實時渲染css

htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exmaple</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
    <input type="text" v-model="message">
    <p>輸入的內容是{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

jsvue

var app = new Vue({
    el: "#app",
    data : {
        message: ''
    }
});

example2：單選按鈕java

htmlnpm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example2</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<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">JS</label>
    <br>
    <input type="radio" v-model="picked" value="CSS" id="css">
    <label for="css">CSS</label>
    <br>
    <p>選擇的項是{{ picked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

js數組

var app = new Vue({
    el: "#app",
    data : {
        picked:'js'
    }
});

example3：多選框app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example2</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<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="js">JS</label>
    <br>
    <input type="checkbox" v-model="checked" value="CSS" id="css">
    <label for="css">CSS</label>
    <br>
    <p>選擇的項是{{ checked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

js.net

var app = new Vue({
    el: "#app",
    data : {
        checked:['JS','HTML']
    }
});

example4：選擇框雙向綁定

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example2</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
    <select v-model="selected" multiple>
        <option>html</option>
        <option>js</option>
        <option>css</option>
    </select>
    <p>選擇的項是{{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app = new Vue({
    el: "#app",
    data : {
        selected: ['html','css']
    }
});

此時v-model綁定的是一個數組

實際業務中，option經過v-for動態生成，value和text經過v-bind動態生成

example4能夠修改一下

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example2</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app = new Vue({
    el: "#app",
    data : {
        selected: 'html',
        options:[
            {
                text:'html',
                value:'html',
            },
            {
                text:'js',
                value:'js',
            },
            {
                text:'css',
                value:'css'
            }
        ]
    }
});

修飾符

.lazy

數據雙向綁定不是實時生效的，失焦或者回車才改變

<input type="text" v-model.lazy="message">

.number

輸入的字符串轉數字

<input type="text" v-model.number="message">

.trim

自動過濾輸入的首位空格

<input type="text" v-model.trim="message">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。