vue-表单操作

简单操作,与官网相同

<template>
    <div>
        <h2>vue form表单</h2>
        <!-- 复选框 -->
        <input type="checkbox" id="dis" v-model="dis">
        <p>{{dis}}</p>


        <!-- 多个复选框,绑定到同一个数组上 -->
        <!-- 作用,可以将选中的放在同一个数组中,再做逻辑操作 -->
        <input type="checkbox" id="gary" value="Gary" v-model="checkd">
        <label for="gary">Gary</label>
        <input type="checkbox" id="hello" value="Hello" v-model="checkd">
        <label for="hello">Hello</label>
        <p>{{checkd}}</p>


        <!-- 单选按钮 -->
        <input type="radio" id="one" value="One" v-model="checkdRadio">
        <label for="one">单选按钮1</label>
        <input type="radio" id="two" value="Two" v-model="checkdRadio">
        <label for="two">单选按钮2</label>
        <p>单选:{{checkdRadio}}</p>


        <!-- 单选列表 -->
        <div>
            <select v-model="selected">
                <option value="china" selected="true">中国</option>
                <option value="france" disabled>美国</option>
                <option value="germany">英国</option>
            </select>
            <p>选中:{{selected}}</p>
        </div>

        <!-- 修饰符 -->
        <!-- .trim :去除前后的空格 v-model.trim="text"-->
        <!-- lazy 变为在 change 事件中同步  <input type="text" v-model="text" lazy>-->

<!-- .number number类型 -->
        <input type="text" v-model.number="text">
        <p>-{{text}}-</p>
    </div>
</template>


<script>
    export default {
        data () {
            return {
                dis: false,
                checkd: [],
                checkdRadio: null,
                selected: 'china', //设china为默认值
                text: null
            }
        }
    }
</script>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值