zoukankan      html  css  js  c++  java
  • Vue表单

    <!--
    v-model
    使用v-model后,表单控件显示的值只依赖所绑定的数据,
    不在关心初始化时的value;
    对于textarea 之间插入的值,
    在中文输入法没有选定插入的值之前,不会触发更新,
    可以使用@input来代替
    radio checkbox select 的用法

    修饰符:
    .lazy 失去焦点或者回车才更新
    v-mode.lazy="message"
    .number
    v-mode.lazy="message"
    .trim 自动过滤首尾空格
    -->
    <input type="text" v-model="message">
    <!-- <textarea v-model="message" id cols="30" rows="10"></textarea> -->
    <textarea @input="handlerInput" id cols="30" rows="10"></textarea>
    <!-- 单选按钮 -->
    <!-- 单独使用 -->
    <input type="radio" :checked="pickd">
    <!-- 互斥效果 -->
    <input type="radio" v-model="pickAll" value="html">
    <input type="radio" v-model="pickAll" value="js">
    <input type="radio" v-model="pickAll" value="css">
    <hr>
    <!-- 复选框 -->
    <!-- 单独使用 -->
    <input type="checkbox" id="checkOnly" v-model="checkOnly">
    <label for="checkOnly">{{checkOnly}}</label>
    <!-- 单独使用 -->
    <input type="checkbox" id="checkOnlyhtml" v-model="checkAll" value="html">
    <label for="checkOnlyhtml">html</label>
    <input type="checkbox" id="checkOnlyjs" v-model="checkAll" value="js">
    <label for="checkOnlyjs">js</label>
    <input type="checkbox" id="checkOnlycss" v-model="checkAll" value="css">
    <label for="checkOnlycss">css</label>
    <hr>
    <!-- 选择列表 -->
    <!--
    option 含有value 有限匹配value
    否则匹配 text
    -->
    <select v-model="selectedOnly">
    <option
    v-for="(item, index) in optList"
    :value="item.value"
    :key="index"
    >{{item.text}}</option>
    </select>
  • 相关阅读:
    -webkit-margin-before 及 扩展浏览器前缀、内核
    vue封装分页组件
    vue项目中使用qrcode生成二维码
    git中全局设置用户名、邮箱
    promise.all 解说
    超详细弹性盒子布局
    js对象转数组
    js取整数、取余数的方法
    数组方法大全
    Vue绑定class
  • 原文地址:https://www.cnblogs.com/niusan/p/10389667.html
Copyright © 2011-2022 走看看