집 >웹 프론트엔드 >JS 튜토리얼 >Vue의 양식 입력 바인딩 및 구성 요소 기본 분석

Vue의 양식 입력 바인딩 및 구성 요소 기본 분석

不言원래의: 2018-07-17 16:50:281138검색

이 기사에서는 Vue의 양식 입력 바인딩 및 구성 요소 기본 사항에 대한 분석을 공유합니다. 도움이 필요한 친구는 이를 참조할 수 있습니다.

목표:

vue에서 양식 처리에 능숙함
이전에 배운 내용을 간략하게 검토하고 배운 내용을 적용할 수 있는 예를 작성합니다(문서 없이 가능)

Forms in vue

vue의 처리 방법은 v-model 명령어를 사용합니다. 이 명령어는 양식 요소의 값, 확인 및 선택된 속성에 데이터를 직접 바인딩할 수 있으며 동시에 이러한 속성도 무시됩니다. 초기 값은 무시되며 항상 vue 인스턴스의 데이터를 데이터 소스로 사용합니다.
v-model을 사용한 후에는 4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014 사이의 보간이 효과적이지 않으며
로 대체됩니다.

양방향 바인딩(v -model)

1. 바인딩 값: text, textarea(string)
text:

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

textarea:

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

2. 바인딩 확인: 체크아웃(단일 바인딩 부울 값, 다중 바인딩) 문자열 배열), radio(string)
checkout(single):

<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. 바인딩 선택: select(string)

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

modifier(v -model 명령에 사용됨) 위)

.lazy: 트리거된 이벤트가 다릅니다. 입력 트리거 대신 변경 트리거를 사용합니다.
.number: 숫자 유형으로 자동 변환됩니다.
.trim: 보호 공백 기호를 자동으로 필터링합니다.

예제

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>

Vue의 양식 입력 바인딩 및 구성 요소 기본 분석

Forms in vue

양방향 바인딩(v -model)

modifier(v -model 명령에 사용됨) 위)

예제

관련 기사