Vue标签属性中class和style的写法

class和style虽然也是标签的一种属性,可与其它的不同,在这里写出来三种方法,下面是class是方法,其实style是一样的。

直接调用data中定义的

<style type="text/css">
			.redcolor{
				color:red;				
			}
			.bgcolor{
				background: #888888;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:'#box',
					data:{
						//注意:这儿后面是redcolor是我们在style中定义的redcolor
						red:'redcolor',
						bg:'bgcolor'
						
					},
					methods:{
						
					}
				});
			};
		</script>

<div id="box">
			<!--
            	时间:2018-02-28
            	描述::class="[red]" 这是调用vue中data里面的定义
            		如果要调用多个class属性那么就是:class="[red,bg]"
            -->
			<strong :class="[red]">这是文字</strong>			
			<strong :class="[red,bg]">这是文字</strong>
		</div>

动态调用style中的样式

<style type="text/css">
			.redcolor{
				color:red;				
			}
			.bgcolor{
				background: #888888;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:'#box',
					data:{
						a:'true',
						b:'false'
						
					}
				});
			};
		</script>


<div id="box">
			<!--
            	时间:2018-02-28
            	描述::class="{redcolor:true}" 这是直接调用style定义的样式,但必须在后面加上:true,这样才会显示样式,如果是:false,则表示不显示样式
            		如果要调用多个class属性那么就是:class="{redcolor:flase,bgcolor:true}"
            		
            		这种方法主要用于和data数据关联,起到动态改变的作用
            -->
			<strong :class="{redcolor:true}">这是文字</strong>			
			<strong :class="{redcolor:false,bgcolor:a}">这是文字</strong>
		</div>

第三种方法

<style type="text/css">
			.redcolor{
				color:red;				
			}
			.bgcolor{
				background: #888888;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:'#box',
					data:{
						jsons:{
							redcolor:true,
							bgcolor:false
						}
					}
				});
			};
		</script>



<div id="box">	
			<strong :class="jsons">这是文字</strong>
		</div>

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND