Web前端开发进阶笔记6——Vue常用特性之表单操作、表单域修饰符

最新推荐文章于 2023-05-20 17:45:38 发布

原创最新推荐文章于 2023-05-20 17:45:38 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Web前端开发——Vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了在Vue.js中如何进行基础的表单操作，包括text、radio、checkbox、option、textarea的使用，并展示了如何禁用submit按钮的默认行为，改用axios进行前后端交互。同时，讲解了表单域修饰符lazy的用法，说明了它如何在用户失去焦点后才更新数据。通过实例代码详细阐述了这两个方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.表单的基础操作：

对于表单的操作我们主要展示几大类，text，radio，checkbox，option，textarea。

需要我们注意的是，现在的表单一般不会再使用默认的提交方式，即submit按钮的默认方法，我们需要禁用掉，并使用我们后面学到的axios来实现前后端的交互。

下面我会用一个简单的表单案例来实现一下以上五大类的用法：

<div id="content">
    <form>
        <!--我们知道当我们使用action属性时，在原先发布时，会执行跳转，而属性中的值就是我们需要跳转的方向-->
        <!--但是我们在这里选择禁用它的默认跳转，我们选择删除它-->
        <!--但是当我们点击按钮时还是会出现页面属性的情况，所以我们需要禁用它的默认动作-->
        <!--首先，我们先创建表单组件-->
        name:<input type="text" placeholder="username" v-model="uname">
        <br>
        sex:<input type="radio" id="man" value="man" v-model="usersex">
        <label for="man">man</label>
        <input type="radio" id="woman" value="woman" v-model="usersex">
        <label for="woman">woman</label>
        <br>
        habbit<input type="checkbox" value="1" id="ck1" v-model="userhabbit">
        <label for="ck1">玩游戏</label>
        <input type="checkbox" value="2" id="ck2" v-model="userhabbit">
        <label for="ck2">看电视</label>
        <input type="checkbox" value="3" id="ck3" v-model="userhabbit">
        <label for="ck3">上网</label>
        <br>
        <select name="city" id="city-choose" v-model="city_take">
            <option value="" disabled="disabled">choose your city</option>
            <option value="jiangsu">jiangsu</option>
            <option value="beijing">beijing</option>
            <option value="guangzhou">guangzhou</option>
        </select>
        <br>
        text:
        <!--这里我们需要注意的是使用v-model离开绑定textarea类型-->
        <textarea name="text" id="textarea" cols="20" rows="5" placeholder="write your notes" v-model="text"></textarea>
        <br>
        <input type="submit" value="发布" @click.prevent="click">
    </form>
</div>
<script>

    var vm = new Vue({
        el: '#content',
        data: {
            uname: '',
            usersex: 'man',
            userhabbit: ['1', '3'],
            city_take: 'jiangsu',
            text:'123'
        },
        methods: {
            click:function () {
                console.log('this is ac!')
                console.log(this.userhabbit.toString())
            }
        }
    })


</script>

2.表单域修饰符：

这里的修饰符前两个很简单，我们来说一下lazy的用法。

在之前我们使用的v-model中，我们很清楚的知道，如果我们在加入插值的时候，会同步显示。

如果我们想要在用户输入完，并且当用户点击别处（失去焦点）时，再让插值显示。

这个时候就可以使用lazy修饰符了：

<div id="content">
			<div>
				<input type="text" placeholder="默认" v-model.lazy="textcontent"/>
			</div>
			<div>{{textcontent}}</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#content',
				data:{
					textcontent:''
				},
				methods:{
					
				}
			})
		</script>