VUE小练习--表单输入绑定

最新推荐文章于 2024-09-06 22:20:29 发布

小k铁柱

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量137

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40890601/article/details/108071441

版权

这篇博客介绍了在Vue.js中进行表单输入绑定的实践，涵盖了styles绑定、单选框、复选框和下拉框的值获取与实时监听。通过对比jQuery，强调了Vue.js在维护性和性能上的优势，认为其使用简便且效率高。

摘要由CSDN通过智能技术生成

包括styles 绑定，单选框复选框下拉框的取值赋值实时监听等等，用多了就会发现vue 维护起来比jquery 容易太多，而且速度非常快，有点傻瓜式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>熟悉vue编程</title>
		<style>
			.active {
    
				color: red;
			}
			.static{
    
				font-size: 2rem;
			}
			.error {
    
				color: lightblue;
			}
			.preLine {
    
				white-space: pre-line;
			}
		</style>
	</head>
	<body>
		<div>
			<div id="box">
				<h1>vue 小练习</h1>
				<p>
					vue中的表单操作
					v-model的用法--表单的交互
				</p>
				<form>
					<!-- 单行输入框 -->
					<div>
						<h3>单行输入框</h3>
						<p>限制输入长度为5</p>
						<input v-model.trim="message" placeholder="enter">
						<label>{
  {5-message.length}}</label>
					</div>
					<!-- 多行输入框 -->
					<!-- white-space="pre-line" 合并空白符序列，但是保留换行符。  -->
					<div>
						<h3>多行输入框</h3>
						<p>white-space="pre-line" 合并空白符序列，但是保留换行符。</p>
						<p v-bind:class="[preLine]">{
  {multiLine}}</p>
						<textarea v-model="multiLine" placeholder="please enter"></textarea>
					</div>
					<div>
						<!-- 复选框 -->
						<h3>复选框</h3>
						<input type="checkbox" id="jack" value

最低0.47元/天解锁文章

小k铁柱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE小练习--表单输入绑定

包括styles 绑定，单选框复选框下拉框的取值赋值实时监听等等，用多了就会发现vue 维护起来比jquery 容易太多，而且速度非常快，有点傻瓜式。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>熟悉vue编程</title> <style> .active { color: red; } .static{
复制链接

扫一扫

专栏目录