zoukankan      html  css  js  c++  java
  • vue2.0 之表单控件绑定

    表单控件绑定v-model

    1、文本

    <template>
      <div>
        <input type="text" name="" v-model="myVal"><br/>
        {{ myVal }}<br/>
        <input type="text" name="" v-model.lazy="myVal1"><br/>
        {{ myVal1 }}<br/>
        <input type="text" name="" v-model.number="myVal2"><br/>
        {{ typeof myVal2 }}<br/>
        <input type="text" name="" v-model.trim="myVal3"><br/>
        {{ myVal3 }}<br/>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            myVal: '',
            myVal1: '',
            myVal2: '',
            myVal3: ''
          }
        }
      }
    </script>
    
    <style>
      html {
        height: 100%;
      }
    </style>
    

    v-model指令在表单控件元素上创建双向数据绑定。

    • lazy:延迟显示
    • number:转化为数字类型
    • trim:去除左右空字符

    2、复选框、单选按钮

    <template>
      <div>
        {{ myVal }} <br/>
        <input type="checkbox" name="" value="apple" v-model="myVal"/>
        <label>apple</label>
        <input type="checkbox" name="" value="banana" v-model="myVal"/>
        <label>banana</label>
        <input type="checkbox" name="" value="orange" v-model="myVal"/>
        <label>orange</label>
        <br/> {{ myVal1 }} <br/>
        <input type="radio" name="" value="apple" v-model="myVal1"/>
        <label>apple</label>
        <input type="radio" name="" value="banana" v-model="myVal1"/>
        <label>banana</label>
        <input type="radio" name="" value="orange" v-model="myVal1"/>
        <label>orange</label>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            myVal: [],
            myVal1: ''
          }
        }
      }
    </script>
    
    <style>
      html {
        height: 100%;
      }
    </style>
    

    3、选择列表

    案例一:

    <template>
      <div>
        {{ myVal }} <br/>
        <select v-model="myVal">
          <option value="0">apple</option>
          <option value="1">banana</option>
          <option value="2">orange</option>
        </select>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            myVal: ''
          }
        }
      }
    </script>
    
    <style>
      html {
        height: 100%;
      }
    </style>
    

    案例二:

    <template>
      <div>
        {{ myVal }} <br/>
        <select v-model="myVal">
          <option v-for="item in options" :value="item.val">{{ item.name }}</option>
        </select>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            myVal: '',
            options: [
              {
                name: 'apple',
                val: 0
              },
              {
                name: 'banana',
                val: 1
              },
              {
                name: 'orange',
                val: 2
              }
            ]
          }
        }
      }
    </script>
    
    <style>
      html {
        height: 100%;
      }
    </style>
    
  • 相关阅读:
    正则表达式30分钟入门教程
    Python的神奇方法指南
    Python 2.7教程
    javaweb开发.常用的第三方包
    javaweb开发.页面中文乱码问题
    javaweb开发.eclipse使用小常识
    javaweb开发3.基于Servlet+JSP+JavaBean开发模式的用户登录注册
    ionic3使用第三方图标
    json-server使用及路由配置
    javaweb开发2.新建一个javaweb项目
  • 原文地址:https://www.cnblogs.com/shhnwangjian/p/7082791.html
Copyright © 2011-2022 走看看