Vue3零基础学习指南之Vue基础（2）— 表单绑定、计算、监听与样式

最新推荐文章于 2024-10-24 14:14:25 发布

原创

最新推荐文章于 2024-10-24 14:14:25 发布 · 2k 阅读

标签

#vue.js #javascript #elementui #前端框架 #前端

本文是Vue3零基础学习系列的第二部分，主要介绍了Vue3中的表单绑定，包括文本、多行文本、复选框、单选框和选择框，以及表单修饰符的使用。同时，讲解了计算属性computed和监听watch的原理与应用。还探讨了class和style的绑定，以及自定义指令directives的创建和钩子函数的使用。

表单绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

文本与多行文本

		<div id="app">
			<input type="text" v-model="msg1">
			<p>{
  
  {msg1}}</p>
			<textarea rows="" cols="" v-model="msg2"></textarea>
			<p style="white-space: pre-line;">{
  
  {msg2}}</p>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						msg1: "",
						msg2: ""
					}
				}
			}).mount("#app")
		</script>

运行结果：

单行文本不能换行，多行文本可以换行

多行文本的样式要有 white-space: pre-line;

复选框 checkbox

单个复选框

单个复选框，绑定到布尔值（如：下段代码中的sel）

		<div id="app">
			<label>
				<input type="checkbox" v-model="sel"> 同意XX条款
			</label> <br>
			<button :disabled="!sel">注册</button>
			{
  
  {sel}}
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						sel: false
					}
				},
			}).mount("#app")
		</script>

运行结果：

多个复选框

多个复选框，绑定到同一个数组（如：下段代码中的fav）

		<div id="app">
			<p>爱好</p>
			<label> <input type="checkbox" value="唱歌" v-model="fav" />唱歌</label>
			<label> <input type="checkbox" value="跳舞" v-model="fav" />跳舞</label>
			<label> <input type="checkbox" value="读书" v-model="fav" />读书</label>
			<label> <input type="checkbox" value="游泳" v-model="fav" />游泳</label>
			<p>{
  
  {fav}}</p>
		</div>
		<script>
			Vu