Analyse der Formulareingabebindung und Komponentengrundlagen in Vue-js-Tutorial-php.cn

Analyse der Formulareingabebindung und Komponentengrundlagen in Vue

不言

Freigeben： 2018-07-17 16:50:28

Original

1111 Leute haben es durchsucht

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 <textarea></textarea> 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">

Nach dem Login kopieren

textarea:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

3. Ausgewählte Bindung: select(string)

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!