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. js06

    接着我们继续学习一些js的知识,这里主要讲js的一些库jq与prototype的一些基础. 1.jq函数    $():向其传递DOM对象,返回jQuery对象        jq允许通过CSS选择器 ...

  2. vue、react、angular三大框架对比 && 与jQuery的对比

    前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢?  这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...

  3. github的本地配置和项目创建

    之前完成了github的安装和账号的注册,接下来要进行项目的创建和本地代码仓库的建立 1.创建项目 2.填写项目相关信息 注意:在给项目起名时,尽量起一些有意义的名字,否则会被管理员删除.因为服务器上 ...

  4. Netty核心概念(5)之Channel

    1.前言 上一节讲了Netty的第一个关键启动类,启动类所做的一些操作,和服务端的channel固定的handler执行过程,谈到了不管是connect还是bind方法最终都是调用了channel的相 ...

  5. 搭建互联网架构学习--003--maven以及nexus私服搭建

    跳过,等待完善中,,, 后台服务工具maven:使用Nexus配置Maven私有仓库 一.安装配置Nexus 1. 下载nexus https://www.sonatype.com/download- ...

  6. ASP.NET 负载均衡 StateServer Session共享问题（经验记录）

    (源地址:http://www.cnblogs.com/ryhan/p/3748976.html) 最近在改造公司的一个系统 支持F5硬件负载,由于系统后面还跟了个异步工具,需要将Admin上传的文件 ...

  7. Linux -- 使用笔记

    Linux新增分辨率1920x1080 sudo gedit /etc/default/grub 找到:#GRUB_GFXMODE=640x480 在这行下面加一行GRUB_GFXMODE=1920x ...

  8. 13-hadoop-入门程序

    通过之前的操作, http://www.cnblogs.com/wenbronk/p/6636926.html http://www.cnblogs.com/wenbronk/p/6659481.ht ...

  9. antlr提取代码注释

    1. 来由 为什么要写提取注释呢,起因是工作需要.弄这么个不太重要的功能点来讲,旨在抛砖引玉. 一般而言,大家使用antlr解析源代码的时候,不会关心注释和空格之类内容,默认会过滤掉,不会放到语法树里 ...

  10. highcharts绘制股票k线

    借助highcharts绘制股票k线: 后台通过websocket没个一定时间下发最新数据,然后重新绘制k线; 开发文档: https://api.highcharts.com/highcharts/ ...