Web前端开发进阶笔记4——属性绑定、样式绑定

最新推荐文章于 2023-07-04 20:05:08 发布

原创最新推荐文章于 2023-07-04 20:05:08 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

25 篇文章

订阅专栏

本文详细探讨了Vue中v-model底层实现原理，以及样式绑定的动态操作，包括对象数组结合、class名简化和数组内联样式的应用。通过实例展示了如何灵活切换CSS类和覆盖样式。

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

1.属性的动态处理：

v-model的低层实现原理分析：

2.样式绑定：

示例：

<div id="content">
			<div :class="{divcss:isActive,bgcchange:isActive1}" @click="changecss()">clickme</div>
		</div>

		<script type="text/javascript">
			var flag = true;
			var vm = new Vue({
				el: "#content",
				data: {
					isActive: true,
					isActive1: false
				},
				methods: {
					changecss: function() {
						if (flag) {
							this.isActive = false;
							this.isActive1 = true;
							flag = false;
						} else {
							this.isActive = true;
							this.isActive1 = false;
							flag = true;
						}
					}
				}
			})
		</script>

多样式我们使用逗号隔开即可。

同时我们来演示一下数组方法：

<div :class="[cssname1,cssname2]" @click="changecss2()">clickme</div>
<script type="text/javascript">
			var flag = true;
			var flag1 = true;
			var vm = new Vue({
				el: "#content",
				data: {
					isActive: true,
					isActive1: false,
					cssname1: 'divcss',
					cssname2: 'bgcchange'
				},
				methods: {
					changecss: function() {
						if (flag) {
							this.isActive = false;
							this.isActive1 = true;
							flag = false;
						} else {
							this.isActive = true;
							this.isActive1 = false;
							flag = true;
						}
					},
					changecss2: function() {
						if (flag1) {
							this.cssname1 = '';
							this.cssname2 = '';
							flag1 = false;
						} else {
							this.cssname1 = 'divcss';
							this.cssname2 = 'bgcchange';
							flag1 = true;
						}
					}
				}
			})
		</script>

下面我们来注意几个细节的操作：

首先说一下第一点，当我们结合使用的时候，需要将对象型写入数组，如[css1name,css2name,{css3:isXXX}]的形式。

再说一下第二点，我们再使用class绑定时，可以通过数组名及对象名来简化操作，示例如下：

<div :class="objclass" @click="changecss3()">clickme</div>
<div :class="arrclass" @click="changecss4()">clickme</div>

//vue方法
changecss3: function() {
						this.objclass.bgcchange = false
					},
changecss4: function() {
						this.arrclass.shift()
					}

大家可以尝试一下上面的代码。

最后，我们如果有默认的class，我们会保留它的存在。

3.style样式操作：

示例如下：

<div id='content'>
			<!-- 这种方式有一个弊端就是太长，容易出错 -->
			<div :style="{height:heightsize,width:widthsize,border:bordersize}">这里使用直接样式操作</div>
			<!-- 第二种我们使用对象代入，和class绑定操作的简化类似 -->
			<div :style="objstyle">这里我们使用obj嵌入</div>
			<!-- 最后我们演示一下使用数组的方式来覆盖或增添新样式 -->
			<div :style="[objstyle,overwriteborder]"></div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#content',
				data: {
					heightsize: '100px',
					widthsize: '200px',
					bordersize: '1px solid blue',
					objstyle: {
						height: '100px',
						width: '200px',
						border: '1px solid blue'
					},
					overwriteborder: {
						border: '3px dotted orange'
					}
				},
				methods: {

				}
			})
		</script>

需要我们注意的是，当我们使用数组性内联样式绑定时，我们添加不同的覆盖已有的。