Vue.js event binding-form event binding-JS Tutorial-php.cn

Vue.js event binding-form event binding

php中世界最好的语言

Release： 2018-03-13 14:10:28

Original

1667 people have browsed it

This time I will bring you the event binding of Vue.js - form event binding. What are the precautions for using Vue.js event binding - form event binding? Here is the actual combat Let’s take a look at the case.

input

<template>
  <div id="myapp">
    <!--
    input的事件绑定与普通的事件绑定的区别:
    input是双向绑定
    事件绑定采用v-model
    -->
    <input type="text" v-model="myVal">
    <!--将表单的内容显示出来-->
    {{myVal}}  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},
    data () {      return {        myVal: &#39;&#39;
      }
    }
  }</script>

Copy after login

Vue.js event binding-form event binding

Modifier: .lazyWhen you hit enter on the keyboard, the data will

update

<input type="text" v-model.lazy="myVal">
......

Copy after login

Other modifiers

.number -

Enter the characters to convert the string into numbers, if you do not add .number.trim - Enter the leading and trailing spaces to filter

intput - checkbox

Checkbox Multiple selection

Still bound with v-model, the settings point to myVal, and myVal should be set to an

array , the value inserted into the array is obtained from the value of input.

<template>
  <div id="myapp">
    {{myVal}}    <br><!--多选-->
    <input type="checkbox" name="" value="apple" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="banana" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="orange" v-model="myVal">
    <label >apple</label>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},
    data () {      return {        myVal: []
      }
    }
  }</script>

Copy after login

Vue.js event binding-form event binding ##intput - radio radio selection

<template>
  <div id="myapp">
    {{myVal}}    <br>
    <!--select-->
    <!--
    为什么默认选种是空的?
    刚开始时,myVal是空的,因为是双向绑定,option里面是没有当前的myVal,所以在这个组件里面是没有被选中的.如果把myVal刚开始设为0 (myVal: &#39;0&#39;),则开始默认为apple.
    -->
    <select name="" id="" v-model="myVal">
      <option v-for="item in options" :value="item.value">{{ item.name }}</option>
    </select>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},
    data () {      return {//        默认值为0,如果设为&#39;&#39;空的话,初始化没有默认选种
        myVal: &#39;0&#39;,        options: [
          {            name: &#39;apple&#39;,            value: &#39;0&#39;
          },
          {            name: &#39;banana&#39;,            value: &#39;1&#39;
          },
          {            name: &#39;orange&#39;,            value: &#39;2&#39;
          }
        ]
      }
    }
  }</script>

Copy after login

Vue.js event binding-form event binding I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!