Vue.js中的绑定样式实现
更新时间：2022年05月27日 11:55:18 作者： 奔跑吧鸡翅
这篇文章主要介绍了Vue.js中的绑定样式实现，展开的内容呦style绑定样式和绑定class样式，具体相关内容需要的小伙伴可以参考下面文章介绍
绑定class样式
1、字符串写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初识</title>
<script type="text/javascript" src="./js/vue.js"></script>
<style>
.basic{
width: 400px;
height: 100px;
border:1px solid black
}
.happy{
background: pink;
}
.sad{
background: skyblue;
}
.normal{
background: aquamarine;
}
</style>
</head>
<body>
<div id="root">
<!--绑定class样式--字符串写法，适用于：样式类名不确定，需动态指定-->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
name:'好好学习',
mood:'normal'
},
methods:{
changeMood(){
const arr = ['happy','sad','normal']
//生成0-2的随机数
this.mood = arr[Math.floor(Math.random()*3)]
}
}
})
</script>
</body>
</html>2、数组写法
<!DOCTYPE html>
<html lang="en">
<head>
......
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black
}
......
.addOne {
background: orange;
}
.addTwo {
font-size: 40px;
}
.addThree {
border-radius: 5px;
}
</style>
</head>
<body>
<div id="root">
......
<!--绑定class样式--数组写法，适用于：要绑定的样式个数和名字都不确定-->
<div class="basic" :class="classArr">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
name: '好好学习',
mood: 'normal',
classArr: ['addOne', 'addTwo', 'addThree']
}
......
})
</script>
</body>
</html>3、对象写法
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black
}
.addOne {
background: orange;
}
.addTwo {
font-size: 40px;
}
</style>
<!--绑定class样式-对象写法-适用于：绑定样式个数确定，名字也确定，但动态决定用不用-->
<div class="basic" :class="classObj">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
name:"好好学习",
classObj:{
addOne:false,
addTwo:true
}
}
})
</script>style 绑定样式
<!--正常的style写法-->
<div class="basic" style="font-size: 40px">{{name}}</div>
<!--使用vue展示样式-->
<div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
name: "好好学习",
fsize: 40
}
})
</script>或者使用 style 对象写法：
<div class="basic" :style="styleObj">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
name: "好好学习",
styleObj:{
fontSize:"30px",
color:"red",
backgroundColor:"orange"
}
}
})
</script>或者 style 数组写法：
<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
name: "好好学习",
styleObj:{
fontSize:"30px",
color:"red"
},
styleObj2:{
backgroundColor:"orange"
}
}
})
</script>绑定样式
1、class样式
- 写法：
class="xxx"xxx 可以是字符串、对象、数组 - 字符串写法适用于：类名不确定，要动态获取
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
2、 style样式 :style="{fontsize: xxx}"其中xxx是动态值
:style="[a,b]"其中a、b是样式对象
scoped
作用：让样式在局部生效，防止冲突 写法:：<style scoped> 后期在组件中用
到此这篇关于Vue.js中的绑定样式实现的文章就介绍到这了,更多相关Vue绑定样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue3实现简易音乐播放器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了详解使用vue实现tab操作,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式,下面这篇文章主要给大家介绍了关于如何基于Vue制作一个猜拳小游戏的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了vue中两种路由模式的实现，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-08-08
解析vue 3.0 使用axios库发起 post get 的配置过程
get post 请求开发中最普通最常见的请求方式但是在vue中如何实现呢 这里记录一下配置过程，对vue 使用axios发起 post get配置过程感兴趣的朋友一起看看吧2022-05-05
本篇文章主要介绍了关于在vue-cli中使用微信自动登录和分享的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
下面小编就为大家带来一篇vue-resource拦截器设置头信息的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue监听scroll的坑的解决方法，现在分享给大家，也给大家做个参考，希望给有同样经历的人帮助2017-09-09
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期2022-08-08
这篇文章主要介绍了浅谈vue中$event理解和框架中在包含默认值外传参，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论