Vue study notes [7] - v-model and the two-way data binding instructions Vue

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

  1. 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;

          }

        }

      }

    });

  

Guess you like

Origin www.cnblogs.com/superjishere/p/11886853.html