bind的深入学习之动态绑定class（对象）

最新推荐文章于 2024-09-14 21:53:48 发布

我心向阳.

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量84

点赞数

文章标签：学习 vue.js

本文链接：https://blog.csdn.net/Mr_xiaoxuboke/article/details/124866997

版权

本文通过两种方式展示了在Vue.js中如何动态绑定class对象，并实现对象的取反操作。方式一是直接在模板中使用计算属性，方式二是通过封装方法来改变和获取class状态。这两种方法在实际开发中都有其适用场景，有助于提高代码的可读性和复用性。

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

目标: 1.学会动态绑定class对象的写法
2.学会取反
3.学会如何封装对象

代码如下：

方式一：    直接写在结构里
		<div id="app">
			<h2 :class="{active:isactive}">我是学生</h2>
		</div>

		<script src="vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data(){
					return {
						isactive:true
					}
				}
			})
		</script>




方式二：
        <div id="app">
			<h2 :class="getactive()">我是学生</h2>
			<button @click="changeActive">切换</button>
		</div>
		
		<script src="vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data(){
					return {
						isactive:true
					}
				},
				
				
				
				methods:{           //封装函数
					getactive(){
						return {
							active:this.isactive
						}
					},
					
					changeActive(){
						this.isactive =  !this.isactive      //取反
						}
					}
		    })
			
		</script>