vue2笔记2 表单用法整理

代码语言：javascript复制

<div id="root">
    <!-- 表单提交事件调用函数，并阻止默认的提交跳转 -->
    <form @submit.prevent="submit">
        <!-- 文本 自动去除头尾空白-->
        姓名:
        <input type="text" v-model.trim="name"/>
        <!-- 数值 输入值转化为数字-->
        <br>年龄:
        <input type="text" v-model.number="age"/>
        <!-- 单选 -->
        <br>性别:
        <input name="sex" type="radio" v-model="sex" value="male"/>男
        <input name="sex" type="radio" v-model="sex" value="female"/>女
        <!-- 复选 保存为数组-->
        <br>兴趣:
        <input type="checkbox" v-model="hobbies" value="看书"/>看书
        <input type="checkbox" v-model="hobbies" value="练字"/>练字
        <input type="checkbox" v-model="hobbies" value="玩游戏"/>玩游戏
        <!-- 下拉 -->
        <br>最爱:
        <select v-model="fav">
            <option :key="hobby" v-for="(hobby,index) in hobbies">{{hobby}}</option>
        </select>
        <!-- 多行文本 延迟数据同步到change之后（失去焦点） -->
        <br>其他:
        <textarea v-model.lazy="other"></textarea>
        <!-- 复选 保存为单值 默认为true/flase-->
        <br>确认:
        <input false-value="no" true-value="yes" type="checkbox" v-model="confirmed"/>
        <br>
        <button>提交</button>
    </form>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    let vm = new Vue({
        data() {
            return {
                name: '',
                age: 12,
                sex: '',
                hobbies: [],
                fav: '',
                other: '',
                confirmed: 'yes'
            }
        },
        methods: {
            submit(event, message) {
                console.log(JSON.stringify(this._data));
            }
        }
    }).$mount('#root');
</script>

笔记 表单

0 人点赞