3.6 样式绑定

一、class样式处理

对象语法 (类名: 是否显示)

   数组语法


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			.active {
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			.error {
				background-color: orange;
			}
		style>
	head>
	<body>
		<div id="app">
			<div v-bind:class="{active: isActive,error: isError}">
				测试样式1:对象语法
			div>
			<button v-on:click="handle">切换1button>
			
			<div v-bind:class="[activeClass, errorClass]">
				测试样式2:数组语法
			div>
			<button v-on:click="handle2">切换2button>
		div>
	body>
	
	<script type="text/javascript" src="../js/vue.js">script>
	<script type="text/javascript" >
	
	/*
	1.class样式处理
	对象语法 (类名: 是否显示)
	
	
	数组语法
	
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 activeClass: 'active',
				 errorClass: 'error',
				 isActive: true,
				 isError: true,
			},
			methods: {
				handle: function () {
					//控制isActive的值 在true 和 false 之间进行切换
					this.isActive = ! this.isActive;
					this.isError = ! this.isError;
				},
				handle2: function () {
					//控制activeClass 的值
					var result = this.errorClass;
					result == ''? this.errorClass = 'error': this.errorClass = '';
				}
			}
		});
	script>
html>

二、样式绑定相关语法细节:

1. 对象绑定和数组绑定可以结合使用

   2. class绑定的值可以简化操作
   数组: arrClass: ['active', 'error']
   对象: objClass: { active: true, error: true }

   3. 默认的class如何处理?
   默认的class会保留


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			.active {
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			.error {
				background-color: orange;
			}
			.test{
				color: blue;
			}
			.base{
				font-size: 28px;
			}
		style>
	head>
	<body>
		<div id="app">
			<div v-bind:class="[activeClass, errorClass, {test: isTest}]">
				测试样式1
			div>
			<button v-on:click="handle">切换button>
			
			<div v-bind:class="arrClass">
				测试样式2-1
			div>
			
			<div v-bind:class="objClass">
				测试样式2-2
			div>
			<div class="base" v-bind:class="objClass">
				测试样式3
			div>
			
		div>
	body>
	
	<script type="text/javascript" src="../js/vue.js">script>
	<script type="text/javascript" >
	
	/*
	样式绑定相关语法细节:
	1. 对象绑定和数组绑定可以结合使用
	
	
	2. class绑定的值可以简化操作
	 数组: arrClass: ['active', 'error']
	 对象: objClass: { active: true,  error: true }
	 				
	3. 默认的class如何处理?
	 默认的class会保留
	
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 activeClass: 'active',
				 errorClass: 'error',
				 isTest: true,
				 arrClass: ['active', 'error'],
				 objClass: {
					 active: true,
					 error: true,
				 }
			},
			methods: {
				handle: function (event) {
					this.isTest = !this.isTest;
					this.objClass.error = ! this.objClass.error;
				}
			}
		});
	script>
html>

三、style样式处理

对象语法 (类名: 是否显示)
①

②

   objStyle: { border: '1px solid green', width: '200px', height: '100px' }

   数组语法


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			<div v-bind:style='{border:borderStyle, width: widthStyle, height: heightStyle}'>
				对象语法1
			div>
			<div v-bind:style='objStyle'>
				对象语法2
			div>
			<div v-bind:style='[objStyle, overrideStyles]'>
				数组语法1
			div>
			<button v-on:click='handle'>切换button>
		div>
		
	body>
	
	<script type="text/javascript" src="../js/vue.js">script>
	<script type="text/javascript" >
	
	/*
	1.style样式处理
	对象语法 (类名: 是否显示)
	① 
	②   
	objStyle: {  border: '1px solid green',  width: '200px',  height: '100px'  }
						
	数组语法
	
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 borderStyle: '1px solid blue',
				 widthStyle: '100px',
				 heightStyle: '200px',
				 objStyle: {
					 border: '1px solid green',
					 width: '200px',
					 height: '100px'
				 },
				 overrideStyles: {
					 border: '5px solid orange',
					 backgroundColor: 'blue'
				 }
			},
			methods: {
				handle: function () {
					//控制高度
					this.heightStyle = '100px';
				
				}
				
			}
		});
	script>
html>

相关阅读:
【Flink源码篇】Flink提交流程之flink命令自定义参数的解析和命令行客户端的选择
树莓派安装OpenCV2教程 (详细教程)
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
第一个SpringBoot项目
Qt使用I.MX6U开发板上的按键（原理：将电脑键盘方向键↓在Qt中的枚举值与开发板中按键定义的枚举值一致，这样电脑端测试效果就与开发板的一致）
spring容器ioc和di
总在用户态调试 C# 程序，终还是搭了一个内核态环境
Elasticsearch：二进制数据类型 - binary field
数值分析思考题（钟尓杰版）参考解答——第五章
[X3m]ros交叉编译

原文地址：https://blog.csdn.net/PengK_aha/article/details/128063414