Vue 框架-05-动态绑定 css 样式

今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分

首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态绑定肯定是根据用户的某个操作实现动态的修改样式

先看下面的第一个小实例：

源代码 html 文件：

请看注释

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script type="text/javascript" src="js/vue.js" ></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<h2>动态绑定 css 样式</h2>

			<!--Vue 中绑定 class，使用的是 json 对象，类名:布尔值

			然后我们可以通过修改 布尔值来实现修改样式-->

			<h3 v-bind:class="{red:true}">实例1</h3>

			<h3>实例2</h3>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/computed.js" ></script>

	</body>

</html>

源代码 css 文件：

.red{

	color: red;

}

.change{

	background-color: yellow;

}

第二个小实例：

实现，鼠标放上去，修改背景色

源代码 html 文件：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script type="text/javascript" src="js/vue.js" ></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<h2>动态绑定 css 样式</h2>

			<!--Vue 中绑定 class，使用的是 json 对象，类名:布尔值

			然后我们可以通过修改 布尔值来实现修改样式-->

			<!--dataRed,dataChange是布尔值，定义在js 文件中-->

			<h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">实例1</h3>

			<h3>实例2</h3>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/css.js" ></script>

	</body>

</html>

源代码 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 文件：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script type="text/javascript" src="js/vue.js" ></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<h2>动态绑定 css 样式</h2>

			<!--Vue 中绑定 class，使用的是 json 对象，类名:布尔值

			然后我们可以通过修改 布尔值来实现修改样式-->

			<!--dataRed,dataChange是布尔值，定义在js 文件中-->

			<h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">实例1</h3>

			<h3 v-on:mouseover="changeHeight=!changeHeight" v-on:mouseout="changeHeight=!changeHeight" v-bind:class="{yellowBG:true,changeHeight:changeHeight}">实例2</h3>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/css.js" ></script>

	</body>

</html>

源代码 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 框架-05-动态绑定 css 样式的更多相关文章

  1. Vue之动态绑定CSS样式

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  2. Angular21 动态绑定CSS样式

    1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...

  3. Vue设置全局js/css样式

    ''' 配置全局js mian.js: import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; ...

  4. Vue 动态绑定CSS样式

    今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4  使用进度条的话 就没有2.9. ...

  5. 使用BootStrap框架设置全局CSS样式

    一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...

  6. Vue 项目部署出现css样式失效的解决方案

    解决方案1: 你的问题就是css权重问题 如果相同权重可能存在引入顺序问题 简单粗暴解决办法 1: 如果是单页面 写入index.html里面 2:直接修改源码的css 很简单~~~3:加个!impo ...

  7. vue 单独页面body css 样式设置

    给某个page下template中的第一个div设置如下样式: .body-bg { position: absolute; width: 100%; height: 100%; top:; left ...

  8. vue项目导入外部css样式和js文件

    <template> <div id="app" > </div> </template> <script src=" ...

  9. 关于Vue-cli 组件引入CSS样式文件

    在 Vue-cli 组件 .vue 文件中引入 css 样式表出错   由于使用Vue-cli后, 引入css 样式表 不需要 多余../../ 之类路径  现在写法也发生了改变 <style ...

随机推荐

  1. TestNG的常用注解

    @BeforeSuite:表示此注解的方法会在当前测试集合(Suite)中的任一测试用例开始运行之前执行 @AfterSuite:表示此注解的方法会在当前测试集合(Suite)中的所有测试程序运行结束 ...

  2. 自动安装zabbix_agent脚本 -- python2

    #!/usr/bin/env python # -*- coding: utf-8 -*- import os ZABBIX_SERVER_IP='10.171.100.28' if os.path. ...

  3. Java之集合(十五)Set综述

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7427554.html 1.前言 原本按照顺序应该是list.queue然后就是set的讲解,但是因为set的实现 ...

  4. 使用.Net Core发布可从外部访问的网站

    首先在https://www.microsoft.com/net 下载.Net Core SDK Visual Studio official MSI Installer NuGet Manager ...

  5. Android 开发工具类 11_ToolFor9Ge

    1.缩放/ 裁剪图片: 2.判断有无网络链接: 3.从路径获取文件名: 4.通过路径生成 Base64 文件: 5.通过文件路径获取到 bitmap: 6.把 bitmap 转换成 base64: 7 ...

  6. CAJ Viewer安装流程以及CAJ或Pdf转换为Word格式

        不多说,直接上干货! pdf转word格式,最简单的就是,实用工具 Adobe Acrobat DC 首先声明的是,将CAJ或者Pdf转换成Word文档,包括里面的文字.图片以及格式,根本不需 ...

  7. Camtasia Studio的下载

    不多说,直接上干货! 具体还没写 https://www.techsmith.com/video-editor.html 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑 ...

  8. Chapter 5. Conversions and Promotions

    JLS解读:https://docs.oracle.com/javase/specs/jls/se7/html/jls-5.html 基本数据类型的转换 1) boolean不可以转换为其他的数据类型 ...

  9. css 设置滚动条的样式

    /*移动端显示滚动条*/ .layui-table-body::-webkit-scrollbar { -webkit-appearance: none; } .layui-table-body::- ...

  10. es6中let,const区别与其用法

    ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScri ...