Vue的样式绑定详解
更新时间：2022年02月24日 16:28:21 作者：Tree_wws
这篇文章主要为大家详细介绍了Vue的样式绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
1. 样式绑定（class、style）
1.1 绑定class
固定的类名就正常的写，需要动态绑定的类名就v-bind去绑定它
例如：:class= "mood"
下面举一些适用的场景：
1.绑定class样式—字符串写法，适用于：样式的类名不确定，需要动态指定
2.绑定class样式 — 数组写法使用的场景 ：绑定的样式的个数不确定，名字也不确定
3.绑定class样式 — 对象写法使用的场景：绑定的个数确定的，名字也确定，不确定的是用不用该类名
<body>
<style>
.basic {
width: 100px;
height: 100px;
border: 2px solid black;
}
.happy {
width: 100px;
height: 100px;
border: 2px solid orange;
background-color: palevioletred;
}
.sad {
width: 100px;
height: 100px;
border: 2px solid black;
background-color: silver;
}
.normal {
width: 100px;
height: 100px;
border: 2px solid greenyellow;
background-color: sandybrown;
}
.outline {
border-radius: 20%;
}
.color {
color: skyblue;
}
.size {
font-family: '微软雅黑';
font-size: 20px;
font-weight: bold;
}
</style>
<div id="root">
<!--
需求1 ：点击div1 随机切换mood
绑定class样式 --- 字符串写法
1. 固定的class类名就正常写，需要动态指定的class类名就 :class="xxx" 写到这里面
2. 使用的场景 : 样式的类名不确定，需要去动态指定
-->
<div class="div1 basic" :class="mood" @click="random">{{name}}</div>
<!--
需求2 ： 点击div2 添加类,或者删除类
绑定class样式 --- 数组写法
1. 使用的场景 ：绑定的样式的个数不确定，名字也不确定
2. shift() ：移除数组中第一个数据， push("xxx")；在末尾添加一个新的数据
-->
<div class="div2 basic" :class="classArr" @click = "remove">{{name}}</div>
<!-- 注意点：在vue操作下 " " 里面的写的字符串是表达式，" '' " 里面写的字符串就是值 -->
<!-- <div class="div2 basic" :class="['outline','color','size']"></div> -->
<!--
需求3 ：在outline和color之间进行切换
绑定class样式 --- 对象写法
使用的场景：绑定的个数确定的，名字也确定，不确定的是用不用该类名
-->
<div class="div3 basic" :class="classObj" @click="change">{{name}}</div>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
name: "Hello,Vue!",
mood: "normal",
classArr:['outline','color','size'],
classObj:{
outline:true,
color:true
}
},
methods: {
random() {
let arr = ["happy", "sad", "normal"]
// Math.floor : 表示向下取整, Math.random()：取值是0-1，1是取不到的
this.mood = arr[Math.floor(Math.random() * 3)]
},
remove(){
this.classArr.shift()
},
change(){
vm.classObj.color = !vm.classObj.color
vm.classObj.outline = !vm.classObj.outline
}
}
})
</script>
1.2 绑定style
例如：:style = "styleobj"
<div id="root" :style="styleobj">
Hello,{{name}}!
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
name:"Vue",
styleobj:{
fontSize: 50 + "px",
color: "red",
border:1+"px"+" "+"solid"+" "+"black"
}
}
})
</script>
总结
本篇文章就到这里了，介绍了class和style如何绑定，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
vue3 座位选座矩阵布局的实现方法(可点击选中拖拽调换位置)
由于公司项目需求需要做一个线上设置考场相关的座位布局用于给学生考机排号考试,实现教室考场座位布局的矩阵布局,可点击选中标记是否有座无座拖拽调换位置横向纵向排列,本文给大家分享实现代码,一起看看吧2023-11-11
详解vue中$nextTick和$forceUpdate的用法
这篇文章主要介绍了详解vue中$nextTick和$forceUpdate的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
我们在开发过程中，有时会遇到后端返回的文件地址和我们的网站不是同源的情况下，本文就介绍了vue如何根据url下载非同源文件，感兴趣的可以了解一下2021-06-06
如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能
本文给大家分享tinymce编辑器如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能，tinymce安装方法文中也给大家详细介绍了，对vue tinymce实现上传公式编辑相关知识感兴趣的朋友跟随小编一起学习下吧2021-05-05
vue报错之exports is not defined问题的解决
这篇文章主要介绍了vue报错之exports is not defined问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
vue2中Print.js的使用超详细讲解（pdf、html、json、image）
项目中有用到打印功能,网上就找了print.js,下面这篇文章主要给大家介绍了关于vue2中Print.js使用（pdf、html、json、image）的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
最近发现很多要求Vue3的技术了,不得不说it技术的更新真的太快了,作为vue2老用户,我们在学习Vue3前应该了解他们的区别以及背后的原因,下面这篇文章主要给大家介绍了关于vue2和vue3区别的相关资料,需要的朋友可以参考下2023-02-02
今天小编就为大家分享一篇在Vue组件中获取全局的点击事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了最新vue-cli 2.9.1的webpack存在问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
这篇文章主要介绍了vue使用自定义事件的表单输入组件用法,结合实例形式详细分析了vue.js日期组件与货币组件相关操作技巧及注意事项,需要的朋友可以参考下2020-06-06
最新评论