vue 入门笔记 05 Vue_Class和Style绑定

Vue_Class和Style绑定

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.bgStyle{
			background: beige;
		}
		.fzStyle50{
			font-size:3.125rem;
		}
 
	</style>
	<body>
		
		
		<div id="app">
			
			<h1 class="bgStyle fzStyle50">这是一个标题0</h1>
			<h1 v-bind:class="bgProprty">这是一个标题1</h1>
			<h1 :class="{bgStyle:isShow,fzStyle50:false}">这是一个标题2</h1>	 
			<h1 :class="[bgProprty01]">这是一个标题3</h1><!-- //没效果 -->
			
			
			<h1></h1>
			<h1 :class='[bgProprty,fzProprty]'>数组下显示Class</h1>
			
			<button v-on:click="onChangeClass()">切换Class</button>
			
		<!-- 	<h1 :style="{background:red}">Style 对象写法下显示Class</h1>//red not defind -->
		    <h1 :style="{background:PrortyRed,color:Prortycolor}">Style 对象写法下显示Class</h1>
			
			 <h1 :style="styleObject1">data 对象写法下显示Class</h1>
			 <h1 :class="[bgProprty01]">这是一个标题3没效果</h1><!-- //没效果 -->
			 <h1 :style="[bgProprty01]">这是一个标题3 有效果</h1><!-- //没效果 -->
			
			
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<script>
			new Vue({
				el:"#app",
				data:{
					isShow:true,
					isShowFont:true,
					bgProprty:"bgStyle",
					fzProprty:"fzStyle50",
					fzProprty1:"{fzStyle50:false}",
					bgProprty01:{background:"red"},
					PrortyRed:"red",
					Prortycolor:"white",
					
					styleObject1:{
						color:"black",
						fontsize:'100px',
						background:"yellow"
					},
				},		
				methods:{
					onChangeClass:function(){
						this.isShow = !this.isShow;
					}
				},
				computed:{
					
				},
			})		
		</script>
		
	</body>
</html>

小结：

class 样式绑定

1 class 绑定

:class="data数据中的值"

<h1 v-bind:class="data 数据">这是一个标题1</h1>

对象的写法：

:calss="{bgStyle:true}"

:calss="{bgStyle:true,fzStyle50:true}"

数组的写法：

:calss="[bgProprty,fzProprty]"

2 style 绑定 class

对象写法：:style"{background:data值，color:data值}"

<h1 :style="{background:PrortyRed,color:Prortycolor}">Style 对象写法下显示Class</h1>

vue 入门笔记 05 Vue_Class和Style绑定

Vue_Class和Style绑定

猜你喜欢