v-model is the only way to achieve two-way data binding instructions vue
One-way data binding: modify the data in memory, synchronize changes on the page. v-bind
<-! V-bind only one-way data binding, automatically bound from M to V, can not realize two-way data binding -> <input type="text" v-bind:value="msg" style="width:100%;">
Two-way data binding: modify the data in memory, synchronization changes the page; data on the modified pages in memory will synchronize changes.
Form elements can interact with the user
<! - v-model using the instructions and data form elements may be implemented Model way data binding -> <- Note:! V-model can only be used in form elements -> <!-- input(radio, text, address, email....)、select、checkbox、textarea --> <input type="text" style="width:100%;" v-model="msg">
Simple Calculator Case
-
HTML code structure
<div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="0">+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">÷</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" v-on:click="getResult"> <input type="text" v-model="result"> </div>
2.Vue example code:
// Create Vue instance, get ViewModel was vm = new Vue ({ the '#app' data: { n1: 0, n2: 0, result: 0, opt: '0' }, methods: { getResult() { switch (this.opt) { case '0': this.result = parseInt(this.n1) + parseInt(this.n2); break; case '1': this.result = parseInt(this.n1) - parseInt(this.n2); break; case '2': this.result = parseInt(this.n1) * parseInt(this.n2); break; case '3': this.result = parseInt(this.n1) / parseInt(this.n2); break; } } } });