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>

相关阅读:
量子计算（十）：量子计算原理
【Linux】yum及vim
Gateway服务网关
MySql分区简单说明
基于SpringBoot的的师生健康信息管理系统
【开发篇】七、RedisTemplate与StringRedisTemplate + Jedis与Lettcus
linux中各种最新网卡2.5G网卡驱动，不同型号的网卡需要不同的驱动，整合各种网卡驱动，包括有线网卡、无线网卡、Wi-Fi热点
信息学奥赛一本通-编程启蒙3103：练18.3 组别判断
【Rust日报】2023-09-09 异步 Rust 很糟糕？
事务的隔离级别

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