Class 与 Style 绑定 --- Vue(5)

最新推荐文章于 2024-07-12 14:10:05 发布

大图图。

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量754

点赞数

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

本文链接：https://blog.csdn.net/weixin_56750059/article/details/123996927

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Class 与 Style 绑定danshi

对于这一节呢！本人哈！我认为是有点意思，因为有个互动的过程，其实以前用基础代码实现过的同学可能很快就可以接受。其实我以前用js实现过，但是比较繁琐哈，人家的就很nice了！！！！好了一起看看吧！！！

<style>
    .box {
        width: 100px;
        height: 100px;
    }

    .active {
    	/* 更改背景颜色 */
        background-color: black;
    }

    .error {
    	/* 更改字体颜色 */
        color: brown;
    }
</style>

<body>
    <div id="app">

        <!-- active是一个样式    isActive是我们定义的变量 -->
        <div :class="{ active : isActive , error : isError}" class="box">
            内容
        </div>
        <button @click="active">按钮</button>


    </div>



    <script src="vue3.js"></script>
    <script>

        let Root = {
            data() {
                return {
                    isActive: false,
                    isError: false
                }
            },
            methods: {
                active() {
                    this.isActive = !this.isActive
                    this.isError = !this.isError
                }
            }
        }

        // 创建一个Vue应用
        const app = Vue.createApp(Root)
        // 进行挂载
        const vm = app.mount('#app')

    </script>
</body>

给大家划分一下重点：

<div :class="{ active : isActive , error : isError}" class="box">

主要看以下三个

:class 其实同学们应该可以猜到，v-bind的简写就是：
所以 :class的就是v-bind:class的意思
也就是绑定一个类

{ active : isActive , error : isError}
这和是一个对象，但是对象里面的是啥呢
key值就是class，也就是所谓的样式，类选择器
value就是data里面的属性，根据属性的布尔值来判断是否更改样式

active() {
this.isActive = !this.isActive
this.isError = !this.isError
}
这个其实就没啥意思了
给按钮了一个active方法，让属性每次都取反值也就是每次都更改样式

就这么简单，其实大家想想是不是用js也是可以写出来的呢，只不过就繁琐了，ok，看看结果吧！！

class样式绑定

那么这就结束了？？？？

想什么呢！！！！

接着干

        <div :class="[active2,error2]" class="box">
            内容2
        </div>

data() {
	return {
		isActive: false,
		isError: false,
		active2: 'active',
		error2: 'error'
	}
},

ok！基于第一步，进行第二步的修改

两个重点

:class=“[active2,error2]”
我们把原先的对象竟然变成了数组！就离谱！！
那是不是就不能实现了呢
怎么可能对吧！！！
既然写了，那就来分析
数组就数组，主要是数组的参数都是来自哪里！！！
哎！！data中的参数，ok！！
第一步OK了

第二部
active2: ‘active’,
error2: ‘error’
这两个又是啥意思，其实
key就是key，存数组的
value是啥呢？？class名，也就是样式名（就这么理解吧！哈哈）
也就是有两个参数的就会拥有
active，error 的样式！！

有的同学就开始了，我不要样式了咋办，那简单 active = ‘’ 不就好了！

<div :class="[isActive ? activeClass : '', errorClass]"></div>

进行内联判断也都是可以的

在组件上也是可以使用的啊看代码！！这个是官网的例子啊！！！

在html上使用了class

<div id="app">
  <my-component class="baz boo"></my-component>
</div>

在组件上也使用了class

const app = Vue.createApp({})

app.component('my-component', {
  template: `<p class="foo bar">Hi!</p>`
})

结果就是

<p class="foo bar baz boo">Hi</p>

这个不用多说吧！！！

最后还有一个 $attrs.class

如果你的组件有多个根元素，你需要定义哪些部分将接收这个 class。可以使用 $attrs 组件 property 执行此操作：

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})

具体看官网，其实没啥！就是定义个data里面的对象，然后去集中管理你要实现的样式！

内联的样式

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

这个就是直接把css样式直接贴上去，没啥稀奇吧
注意 fontSize: fontSize + ‘px’
如果是这样那我们能不能直接zaidata里定义一个fontSize呢？
势必是可以的哈，到时候就是直接调用就可以了

style="{ color: activeColor, fontSize}

这个就还行了
直接把对象贴上去，哈哈哈，看看怎么回事哈

<div :style="styleObject"></div>

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

其实能看到这就已经明了了，传个对象，对象里都是css样式，那就是直接用的对象里面的属性嘛！！

<div :style="[baseStyles, overridingStyles]"></div>

兄弟们，对象刚走，就又来了一群对象，这能忍？？？
不说了啊！！自己体会！！

大图图。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Class 与 Style 绑定 --- Vue(5)

Class 与 Style 绑定danshi对于这一节呢！本人哈！我认为是有点意思，因为有个互动的过程，其实以前用基础代码实现过的同学可能很快就可以接受。其实我以前用js实现过，但是比较繁琐哈，人家的就很nice了！！！！好了一起看看吧！！！<style> .box { width: 100px; height: 100px; } .active { /* 更改背景颜色 */ background-color
复制链接

扫一扫