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. vue-Treeselect 使用备注

    <head> <!-- include Vue 2.x --> <script src="https://cdn.jsdelivr.net/npm/vue@@^ ...

  2. (转)windows 2003 远程桌面关闭 运行程序退出解决

    windows 2003 远程桌面关闭 运行程序退出解决 原文:http://2798996.blog.51cto.com/2788996/503365 情况:远程桌面到2003,运行一个程序,然后关 ...

  3. 48位MAC转化为唯一的128位IPV6地址

    根据EUI_64规范,一个MAC地址生成唯一的一个IPV6地址. ①.反转MAC的第七位为1. ②.在24bit后加入FFFE. ③.在最前面加上FE80::. 示例:

  4. 使用fiddler抓手机包遇到问题

    1,http://blog.csdn.net/roland_sun/article/details/30078353 2,参照上面不周,不能实现用自己ip:8888端口下载出证书 解决办法,先从fid ...

  5. C/C++ -- Gui编程 -- Qt库的使用 -- 纯代码实现信号槽

    失败,系统找不着槽 #include<QtGui> int main(int argc, char * argv[]) { QApplication app(argc, argv); QT ...

  6. Cocos2d-x游戏导出android工程，提取cocos的so文件

      Cocos2d-x游戏导出android工程,提取cocos的so文件   原本cocos游戏的android工程编译时,需要将cocos的库文件进行编译,这些文件大部分是cpp文件, 使用ndk ...

  7. CSS3设置Table奇数行和偶数行样式

    table:.myTable tr:nth-child(even){ //偶数行 background:#fff;}.myTable tr:nth-child(odd){ //奇数行 backgrou ...

  8. VF

    VF 描述 Vasya is the beginning mathematician. He decided to make an important contribution to the scie ...

  9. 一个在linux环境执行io操作的bug

    今天项目有了一个奇葩的要求...是什么呢 后台上传了视频后,解析其中的时长,和预览图,并拼接在一起,然而,之东西并不是太麻烦,很快写好了,在本地测试后也没有问题,嗯,发布到测试环境后,一个jar包报错 ...

  10. imx6的kernel3.4.15启动流程

    //最开始的定义为 DT_MACHINE_START(IMX6Q, "Freescale i.MX6 Quad/DualLite (Device Tree)") .smp = sm ...