vue2入门---＞绑定样式，条件渲染，列表渲染，收集表单数据

已于 2022-09-02 21:28:06 修改
阅读量547 收藏
点赞数 1
分类专栏： vue2&vue3 文章标签： vue.js 前端 javascript
于 2022-09-02 20:19:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52385631/article/details/126669754
版权

1. 绑定样式

1.1 介绍

<!--
            绑定样式：
                    1. class样式
                                写法:class="xxx" xxx可以是字符串、对象、数组。
                                        字符串写法适用于：类名不确定，要动态获取。
                                        对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
                                        数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
                    2. style样式
                                :style="{fontSize: xxx}"其中xxx是动态值。
                                :style="[a,b]"其中a、b是样式对象。
        -->

1.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>
	
</html>

2. 条件渲染

2.1 介绍

<!-- 
                条件渲染：
                            1.v-if
                                        写法：
                                                (1).v-if="表达式" 
                                                (2).v-else-if="表达式"
                                                (3).v-else="表达式"
                                        适用于：切换频率较低的场景。
                                        特点：不展示的DOM元素直接被移除。
                                        注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

                            2.v-show
                                        写法：v-show="表达式"
                                        适用于：切换频率较高的场景。
                                        特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
                                
                            3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
         -->

2.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- v-else和v-else-if -->
			<!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

			<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:0
			}
		})
	</script>
</html>

3.列表渲染

3.1 基本列表

3.1.1 介绍

<!-- 
                v-for指令:
                        1.用于展示列表数据
                        2.语法：v-for="(item, index) in xxx" :key="yyy"
                        3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
        -->

3.1.2 代码渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
</html>

3.2 key的原理

3.2.1 介绍

<!-- 
                面试题：react、vue中的key有什么作用？（key的内部原理）
                        
                        1. 虚拟DOM中key的作用：
                                        key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
                                        随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
                                        
                        2.对比规则：
                                    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
                                                ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
                                                ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

                                    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
                                                创建新的真实DOM，随后渲染到到页面。
                                                
                        3. 用index作为key可能会引发的问题：
                                            1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
                                                            会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

                                            2. 如果结构中还包含输入类的DOM：
                                                            会产生错误DOM更新 ==> 界面有问题。

                        4. 开发中如何选择key?:
                                            1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
                                            2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
                                                使用index作为key是没有问题的。
        -->

3.1.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<button @click.once="add">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>
</html>

3.3 列表过滤

3.3.1 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>

3.4 列表排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表排序</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<button @click="sortType = 2">年龄升序</button>
			<button @click="sortType = 1">年龄降序</button>
			<button @click="sortType = 0">原顺序</button>
			<ul>
				<li v-for="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						const arr = this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
						//判断一下是否需要排序
						if(this.sortType){
							arr.sort((p1,p2)=>{
								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
							})
						}
						return arr
					}
				}
			}) 

		</script>
</html>

3.5 总结数据监视

3.5.1 介绍

<!--
            Vue监视数据的原理：
                1. vue会监视data中所有层次的数据。

                2. 如何监测对象中的数据？
                                通过setter实现监视，且要在new Vue时就传入要监测的数据。
                                    (1).对象中后追加的属性，Vue默认不做响应式处理
                                    (2).如需给后添加的属性做响应式，请使用如下API：
                                                    Vue.set(target，propertyName/index，value) 或 
                                                    vm.$set(target，propertyName/index，value)

                3. 如何监测数组中的数据？
                                    通过包裹数组更新元素的方法实现，本质就是做了两件事：
                                        (1).调用原生对应的方法对数组进行更新。
                                        (2).重新解析模板，进而更新页面。

                4.在Vue修改数组中的某个元素一定要用如下方法：
                            1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                            2.Vue.set() 或 vm.$set()
                
                特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
        -->

3.5.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
			<button @click="student.sex = '未知' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名：{{student.name}}</h3>
			<h3>年龄：{{student.age}}</h3>
			<h3 v-if="student.sex">性别：{{student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>

4. 收集表单数据

4.1 介绍

<!-- 
            收集表单数据：
            若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
            若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
             若：<input type="checkbox"/>
                   1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                    2.配置input的value属性:
                          (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                          (2)v-model的初始值是数组，那么收集的的就是value组成的数组
                    备注：v-model的三个修饰符：
                                    lazy：失去焦点再收集数据
                                    number：输入字符串转为有效的数字
                                    trim：输入首尾空格过滤
        -->

4.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>

骑猪去兜风z1
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
07-利用循环实现列表的渲染.html
09-03
07-利用循环实现列表的渲染
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
4. **数据绑定**：表单的值与 Vue 实例的数据对象双向绑定，方便获取和处理用户的选择。 5. **可配置性**：组件的样式、布局、提示信息等都可以通过配置项进行调整，满足不同的设计需求。 6. **性能优化**：利用 ...
12.列表渲染
s12345672的博客
08-17 320
列表渲染 1. 基本列表 条件渲染： 1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景。 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。 2.v-show 写法：v-show="表达式"
vue 做后台管理系统2维数组表单（动态渲染可编辑单元格的Table）_vue二维数组怎么渲染到表格里
最新发布
2401_84418883的博客
05-16 363
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。
[vue3]vue3中引入class类的写法
bbt953的博客
11-14 6391
vue3中引入class类的写法
vue class的绑定
不靠谱的作曲家
12-30 1914
1.对象的绑定 基本用法 :class="{ 'active': isActive }" 判断是否绑定 :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 2.绑定并判断多个 第一种（用逗号隔开） :class="{ 'active': isActive, 'sort': isSort }" 第二种（放...
vue学习小记-class类样式书写方式
cqy5071021的博客
05-07 1352
class类样式书写方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
综上所述，通过合理地利用Vue的数据绑定和Element UI的组件特性，我们可以实现一个既能添加又能编辑数据的表单，同时确保在表单提交后能够有效地清空数据，提高用户体验。这种做法既考虑了性能，又保持了代码的整洁...
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）
10-19
Vue.js的核心特性之一就是它的数据绑定和表单渲染功能，这些功能使得开发者能轻松地将数据动态地展示在页面上，并与用户的交互进行响应。 1. Vue.js 数据绑定： Vue.js 提供了多种方式来实现数据绑定，包括文本插值...
vue自定义表单生成器form-create使用详解
10-16
`form-create` 支持 Vue 的各种组件，并且提供了丰富的功能，如动态渲染、数据收集、验证以及表单提交。以下是对 `form-create` 的详细解析： ### 主要特性 1. **动态渲染** - 只需提供 JSON 配置，即可自动生成...
vue----根据后台返回字段自动生成表单列表.zip
09-29
总的来说，这个项目涵盖了Vue.js中的动态渲染、数据绑定、条件渲染、列表渲染等核心概念，以及根据后端API动态构建UI的能力。对于学习Vue.js和前端动态表单开发的开发者来说，这是一个很好的实践案例。通过对这个...
vue中class的写法
m0_45219210的博客
04-10 1987
比如想给一个i标签添加一个class。 数组的写法 <i class="iconfont" :class="[style[type].icon]"></i> 当style[type].icon存在的时候就会自动添加上类名。 对象的写法 <i class="iconfont" :class="{'icon-warning':true}"></i> 当冒号后面为true的时候，会给标签加上类名，为false时则不会加 ...
vue动态class的写法
花生日记
05-24 2335
当我们创建了一个新的 class对象后，我们就可以给该对象赋值了，如果你的属性值是一个整数或者字符串，那么你可以将其直接赋值给变量，如果是字符串则可以赋值给字符串变量。首先我们需要定义一个变量来作为该函数的参数，然后我们可以通过下面的代码来查看： 上面的代码是将“submit”类型的变量定义为v-mount类型，并将其初始化为0,最后将这个变量赋值给了“submit”类型的变量。使用“return”来结束一个函数是非常简单的，因为“return”本身就是一个函数，它可以让你在函数执行完之后立即返回结果。
vue3之基础语法 动态class :class :style
weixin_43845137的博客
03-03 3191
目录vue3之基础语法基础的样式写法动态样式之 对象写法动态样式之 数组写法v-for循环v-model vue3之基础语法 基础的样式写法 动态样式之 对象写法 方法1 用ts定义当前对象的type数据类型 type style 定义当前的样式的数据 const style 定义当前显示的 数据 msg <template> <div> <div :style="style">{{ msg }}</div> </div>
Vue3-06-样式绑定-class绑定的写法总结
northcastle的博客
12-12 1782
Vue3 中使用 class 实现样式绑定
Vue列表渲染
qq_54334713的博客
06-20 1245
vue官方文档解读
vue绑定class的三种写法
a791226606的博客
12-23 245
vue绑定class的三种写法
5.Vue - 绑定class样式、style样式
weixin_51351637的博客
08-31 6391
绑定样式1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}” 其中xxx是动态值：style="[a,b]" 其中ab是样式对象，如下。...
使用Vue绑定class和style样式的几种写法
见证自己学习,成长的记录
03-28 1806
绑定样式：1 class样式写法：class=‘xxx’ xxx可以是字符串，对象，数组字符串写法适用于：类名不确定，要动态获取对象写法适用于：要绑定多个样式，个数不确定，名字也不确定数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用2 style样式:style=“fontSize:xxx”，其中xxx是动态值，fontSzie=font-size,如果只有一个单词正常写即可，如果多个需要使用驼峰命名:style=“[a,b]”，其中a,b是样式对象。
Vue入门实战：条件渲染、双向绑定与表单控制详解
Vue快速入门（二）文档详细介绍了Vue.js的基本概念和常用功能，旨在帮助读者快速上手...通过阅读这篇文章，读者可以掌握Vue.js的基础应用，包括数据绑定、条件渲染、数组操作和表单处理等方面，从而更好地开发Vue项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骑猪去兜风z1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值