Heim > Artikel > Web-Frontend > Analyse der Formulareingabebindung und Komponentengrundlagen in Vue

Analyse der Formulareingabebindung und Komponentengrundlagen in Vue

不言Original: 2018-07-17 16:50:281100Durchsuche

Dieser Artikel gibt Ihnen eine Analyse der Formulareingabebindung und der Komponentengrundlagen in Vue. Freunde in Not können sich darauf beziehen.

Ziel:

Die Verarbeitung von Formularen in Vue kompetent beherrschen
Ein kurzer Rückblick auf das, was Sie zuvor gelernt haben, und Schreiben Sie ein Beispiel und wenden Sie das Gelernte an (am besten verlassen Sie das Dokument)

Die Verarbeitungsmethode des Formulars in vue

Die Verarbeitungsmethode des Formulars in Vue ist die V-Modell-Anweisung. Diese Anweisung kann Daten direkt an den Wert, die überprüften und ausgewählten Attribute im Formularelement binden. Gleichzeitig haben diese Attribute auch ihre Anfangswerte wird ignoriert und die Daten der Vue-Instanz werden immer als Datenquelle verwendet.
Nach der Verwendung des V-Modells ist die Interpolation zwischen 4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014 nicht mehr gültig durch V-Modell ersetzt werden.

Bidirektionale Bindung (V-Modell)

1. Bind-Wert: Text, Textbereich (String)
Text:

<input v-model="message" placeholder="edit me">

textarea:

<textarea v-model="message" placeholder="add multiple lines"></textarea>

2. Bind Definiert geprüft: checkout (einzelner gebundener boolescher Wert, mehrere gebundene String-Arrays), radio (string)
checkout (einzeln):

<input type="checkbox" id="checkbox" v-model="checked">

checkout (multiple):

<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>

radio:

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>

3. Ausgewählte Bindung: select(string)

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Modifikator (wird für die V-Modell-Direktive verwendet)

.lazy: Die ausgelösten Ereignisse sind unterschiedlich, verwenden Sie einen Änderungstrigger anstelle des Eingabetriggers
.number: automatisch in numerischen Typ konvertiert
.trim: Schutz-Leerzeichensymbol automatisch filtern

Beispiel

form .html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单输入绑定</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <p id="app">
        <form>
            <!-- 文本 -->
            <input type="text" v-model="formData.textValue">{{formData.textValue}}<br>
            <textarea v-model="formData.textareaValue"></textarea>{{formData.textareaValue}}<br>
            <!-- checkout(单个) -->
            <input type="checkbox" id="checkbox" v-model="formData.isChecked"><label for="checkbox">点我啊</label><br>
            <!-- 多个多选 -->
            <input type="checkbox" id="haha" value="haha" v-model="formData.checkedValues">
            <label for="haha">哈哈</label>
            <input type="checkbox" id="hoho" value="hoho" v-model="formData.checkedValues">
            <label for="hoho">呵呵</label>
            <input type="checkbox" id="hihi" value="hihi" v-model="formData.checkedValues">
            <label for="hihi">嘻嘻</label>
            <br>
            多选选中的是<span v-for="value of formData.checkedValues"> {{value}} </span>
            <br>
            <!-- 单选 -->
            <input type="radio" id="one" value="one" v-model="formData.pickedValue">
            <label for="one">one</label>
            <input type="radio" id="two" value="two" v-model="formData.pickedValue">
            <label for="two">two</label>
            <input type="radio" id="three" value="three" v-model="formData.pickedValue">
            <label for="three">three</label>
            <br>
            单选选中的是<span> {{formData.pickedValue}} </span>
            <br>
            <!-- 下拉选择框 -->
            <select v-model="formData.selectedValue">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <br>
            下拉选择框选中的是<span> {{formData.selectedValue}} </span>
            <br>
            <a @click="submitForm">提交</a>
        </form>
    </p>
</p>
<script>
    var vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            formData: {
                textValue: &#39;&#39;,
                textareaValue: &#39;&#39;,
                isChecked: true,
                checkedValues: [],
                pickedValue:&#39;&#39;,
                selectedValue: &#39;&#39;
            },
            msg: &#39;这是一句消息&#39;
        },
        methods: {
            submitForm: function(){
                for(var key in this.formData) {
                    obj[key] = this.formData[key];
                }
                console.log(this.formData);
                console.log(this.msg);
            }
        }
    });
</script>
</body>
</html>

Verwandte Empfehlungen:

Analyse der Ereignisverarbeitung in Vue

Klassen- und Stilbindung und bedingte und Analyse der Listenwiedergabe

Das obige ist der detaillierte Inhalt vonAnalyse der Formulareingabebindung und Komponentengrundlagen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html select 字符串 class 数字类型 number 事件 input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse der Ereignisverarbeitung in VueNächster Artikel：Analyse der Ereignisverarbeitung in Vue

In Verbindung stehende Artikel

Mehr sehen