今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分
 
首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态绑定肯定是根据用户的某个操作实现动态的修改样式
 
先看下面的第一个小实例：
 

 
源代码 html 文件：
 
请看注释
VueLearn-cnblogs/xpwi
 

  
动态绑定 css 样式
  
实例1
  
实例2
 
 
源代码 css 文件：
 
.red{
 
color: red;
 
}
 
.change{
 
background-color: yellow;
 
}
 
第二个小实例：
 
实现，鼠标放上去，修改背景色
 

 
源代码 html 文件：
VueLearn-cnblogs/xpwi
 

  
动态绑定 css 样式
  
实例1
  
实例2
 
 
源代码 js 文件：
 
//实例化 vue 对象
 
new Vue({
 
//注意代码格式
 
//el：element 需要获取的元素，一定是 html 中的根容器元素
 
el:"#vue-app",
 
data:{
 
dataRed : true,
 
dataChange : false
 
},
 
methods:{
 
}
 
});
 
源代码 css 文件：
 
.red{
 
color: red;
 
}
 
.change{
 
background-color: yellow;
 
}
 
上面的动态，大家可以看到是通过修改样式的 打开和关闭
 
实例二：
 

 
源代码 html 文件：
VueLearn-cnblogs/xpwi
 

  
动态绑定 css 样式
  
实例1
  
实例2
 
 
源代码 js 文件：
 
//实例化 vue 对象
 
new Vue({
 
//注意代码格式
 
//el：element 需要获取的元素，一定是 html 中的根容器元素
 
el:"#vue-app",
 
data:{
 
dataRed : true,
 
dataChange : false,
 
changeHeight : false
 
},
 
methods:{
 
}
 
});
 
源代码 css 文件：
 
.red{
 
color: red;
 
}
 
.change{
 
background-color: yellow;
 
}
 
.yellowBG{
 
width: 20%;
 
background-color: yellow;
 
}
 
.changeHeight{
 
width: 20%;
 
height:100px
 
}
 
总结
 
以上所述是小编给大家介绍的Vue 框架之动态绑定 css 样式实例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

VUE动态绑定Css样式、Style样式
 
一、背景
 
这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了，因为uniapp的语法是vue的语法，所以uniapp的样式问题主要也就是vue的样式问题，一直以来这一块自己也没有好好的总结过，特此总结。
 
二、栗子
 
思路，主要是在data、methods、computed三个地方定义变量、方法或者计算属性来给出指定的背景。
 （1）css动态样式（data数据）
 
<template>
	<view>
		<view :class="{bgOne:isCheck,bgTwo:!isCheck}">2323</view>
		<button @click="changeBg">切换</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isCheck:true
			}
		},
		methods:{
			changeBg(){//改变背景
				this.isCheck = !this.isCheck
			}
		}
	}
</script>

<style >
	.bgOne{
		background-color: red;
	}
	.bgTwo{
		background-color: green;
	}
</style>
 

 点击切换按钮切换背景
 （2）css动态样式（methods）
 
<template>
	<view>
		<view v-for="(item,index) in ['A','B','C']" :class="{bgOne:selectBg(index),bgTwo:selectBg(index+1),bgThree:selectBg(index+2)}">{{item}}</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			
			}
		},
		methods:{
			selectBg(i){
				if((i+1)%3==1){
					return true
				}else{
					return false
				}
			}
		}
	}
</script>

<style >
	.bgOne{
		background-color: red;
	}
	.bgTwo{
		background-color: green;
	}
	.bgThree{
		background-color: blue;
	}
</style>
 
效果展示：
 
 （3）css动态样式（computed）
 
<template>
	<view>
		<view :class="{bgOne:setBg}">2323</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		methods:{
		},
		computed:{
			setBg(){
				return true
			}
		}
	}
</script>

<style >
	.bgOne{
		background-color: red;
	}
</style>
 

 （4）行内style动态样式（data数据）
 
<template>
	<view>
		<view :style="{backgroundColor:bgColor}">2323</view>
		<button @click="changeBg">切换</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				bgColor:'green'
			}
		},
		methods:{
			changeBg(){//改变背景
				this.bgColor= 'red'
			}
		}
	}
</script>

<style >

</style>
 

 点击切换按钮切换背景
 （5）行内style动态样式（methods）
 
<template>
	<view>
		<view v-for="(item,index) in ['A','B','C']" :style="{backgroundColor:selectBg(index)}">{{item}}</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			
			}
		},
		methods:{
			selectBg(i){
				if((i+1)%3==1){
					return 'red'
				}else if((i+1)%3==2){
					return 'green'
				}else{
					return 'blue'
				}
			}
		}
	}
</script>

<style >

</style>
 
效果展示：
 
 （6）行内style动态样式（computed）
 
<template>
	<view>
		<view :style="{backgroundColor:bgColor}">2234</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			
			}
		},
		computed:{
			bgColor(){
				return 'green'
			}
		}
	}
</script>

<style >

</style>
 
 
三、总结
 
（1）加bind的符号“:”
 （2）

问题描述：
 
 
 
一个脱离文档流的元素定位，要根据文档流中的特定元素的位置而改变，而该特定元素的位置又是不固定的，这个时候css代码就不能直接写，需求如下：
 
 
 
解决方案：
 
先给弹窗写基础样式，定位信息可以不写
 
 
 
toast_tips 表示该元素的基础样式，写在css中，toast_tips_style表示附加样式，需要在js中动态写入
 
 
 <div v-show="toast" class='toast_tips' :style="toast_tips_style" @click="hideToast">
        <p>xxxxxxxx</p>
      </div>
 
 .toast_tips{
      position: absolute;
      width:5.12rem;
      height:1.44rem;
      display: flex;
      flex-direction: column;
      align-items: left;
      padding-top: 0.4rem;
      padding-left: 0.213333rem;
      background: url('../../../static/images/partner/freeze.png') no-repeat center/100%;
      >p{
        font-size:0.32rem;
        font-family:PingFangSC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:16px;
      }
    }
 
data中写入toast_tips_style附加样式结构
 
 data () {
    return {
      toast:false,
      //增加的附加样式，这里就是动态增加定位样式
      toast_tips_style:{
        left: '',
        top:''
      },
 }
 
js中给toast_tips_style动态样式设置数据
 
 
 
找到定位元素的参照物，利用 this.$refs获取参考元素rt_dom和目标元素faq_dom的dom节点，找到参考元素的定位信息
 根据参考元素和目标元素的位置关系，动态设置目标元素的位置信息
 
 
div class="rt" ref="rt_dom">
<span ref="faq_dom"  class="faq" @click="show_toast"></span>
 
 show_toast:function(event){
        this.toast = true;
        //获取当前屏幕宽度px
        var screen_width = document.body.clientWidth;
        var el = event.currentTarget;
        var rt_dom = this.$refs.rt_dom.offsetHeight;
        var faq_dom = this.$refs.faq_dom.offsetLeft;
        //计算出的定位信息px转rem
        this.toast_tips_style.left=(faq_dom-145)*10/screen_width+'rem'
        this.toast_tips_style.top=(rt_dom-8)*10/screen_width+'rem'
    },
 
PS：如果你不想js中去写css代码，你也可以用一个相对位置的div去包含一个绝对位置的div，定位信息可以使用负数的方式去矫正定位。

 
calss语法格式=> ：class=”{ ’ a ’ : f }” 
 a表示添加的css样式，f 表执行条件，满足条件就添加写好的Css样式。用于添加Css样式
 
style语法格式=> ：style=”{ ’ Q ’ : R }” 
 Q表示具体修改的Css样式，R表示修改的值。用于修改CSS某一个样式。