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. 数据输入——生成你需要的echart图(世界地图，气泡图)

    上一篇文章介绍了:堆积柱状图.扇形图.嵌套环形图,现在来介绍一下:世界地图和气泡图 1.世界地图 http://echarts.baidu.com/examples/editor.html?c=map ...

  2. springBoot上传文件时MultipartFile报空问题解决方法

    springBoot上传文件时MultipartFile报空问题解决方法 1.问题描述: 之前用spring MVC,转成spring boot之后发现上传不能用.网上参考说是spring boot已 ...

  3. 【Java并发编程】：深入Java内存模型——happen-before规则及其对DCL的分析

    happen—before规则介绍 Java语言中有一个“先行发生”(happen—before)的规则,它是Java内存模型中定义的两项操作之间的偏序关系,如果操作A先行发生于操作B,其意思就是说, ...

  4. Disconf 学习系列之Disconf 的功能特点

    不多说,直接上干货! 支持配置(配置项+配置文件)的分布式化管理 配置发布统一化 配置发布.更新统一化(云端存储.发布):配置存储在云端系统,用户统一在平台上进行发布.更新配置. 配置更新自动化:用户 ...

  5. wordcloud+jieba

    Wordcloud各参数含义 font_path : string #字体路径,需要展现什么字体就把该字体路径+后缀名写上,如:font_path = '黑体.ttf' width : int (de ...

  6. js判断手机是否安装了某一款app，有则打开，没有去下载

    function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...

  7. C# 从Excel 批量导入数据库

    最近遇到了关于 C# MVC 批量添加数据的问题,解决后就自己写了一个未完成的小Demo  不管什么编程语言都会提供操作Excel文件的方式,C#操作Excel主要有以下几种方式: 1.Excel 说 ...

  8. jQuery通过input标签的name获取值

    jquery根据name属性查找 $("div[id]") 选择所有含有id属性的div元素 $("input[name='keleyicom']") 选择所有 ...

  9. JavaScript 函数全局变量定义

    在 JavaScript 中, 作用域 影响着变量的作用范围.在函数外定义的变量具有 全局 作用域.这意味着,具有全局作用域的变量可以在代码的任何地方被调用. 没有使用var关键字定义的变量,会被自动 ...

  10. 为Jquery类和Jquery对象扩展方法

    转:https://www.cnblogs.com/keyi/p/6089901.html jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend( ...