vue（v-if，lable）

最新推荐文章于 2024-03-09 10:03:46 发布

小青龙8085

最新推荐文章于 2024-03-09 10:03:46 发布

阅读量2k

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/103216590

版权

前端同时被 2 个专栏收录

39 篇文章

订阅专栏

vue

35 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的表单控件切换示例，通过点击按钮切换显示email输入框和qq输入框，展示了label元素如何与input元素配合使用，提高用户体验。

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

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

这个保证点击“切换类型”之后输入框的信息不复用。

点击切换类型之后

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root" >
			<span v-if="status">
				<label for="email">email</label>
				<input type="text"  id="email" placeholder="email" key="email"/>
			</span>
			
			<span v-else>
				<label for="qq">&nbsp;&nbsp;qq&nbsp;&nbsp;</label>
				<input type="text"  id="qq" placeholder="qq" key="QQ"/>
			</span>
			
			<button @click="status=!status">切换类型</button>
        </div> 
        <script>
            new Vue({
                el:"#root",
                data:{
					status:true
                },
                methods:{
                    
                }
            })
        </script>
    </body>
</html>