Vue 框架之动态绑定 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<!--引入 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<!--引入 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<!--引入 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 框架之动态绑定 css 样式实例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
vue 中动态绑定class 和 style的方法代码详解
先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,
-
Vue.js实现按钮的动态绑定效果及实现代码
实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
-
vuejs实现标签选项卡动态更改css样式的方法
html <ul class="header-list"> <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}
-
详解Vue.js动态绑定class
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c
-
Vue2.0设置全局样式(less/sass和css)
为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误 require('./common/less/index.less') 第二步:在build目录下的webpack.base.c
-
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理. 如果需要使用sass,则安装: npm install node-sass --save-dev npm install sass-loader --save-dev 如果需要使用less,则安装: npm install less --save-dev npm install less-loader --save-dev sass
-
vue.js选中动态绑定的radio的指定项
上一文,介绍了vue.js动态添加.删除绑定的radio选项,本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''> 你的checked属性值是true或者false,他都会选中. 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染ch
-
微信小程序如何像vue一样在动态绑定类名
小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块.模块只有通过 module.exports 或者 exports 才能对外暴露接口. 通俗的将就是自身独立,作用域只作用于该模块,与js互不影响. 主要代码 modu
-
Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释 <!DOCTYPE html>
-
vue 弹出遮罩层样式实例
以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式. <div class='popContainer'></div> div.popContainer{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); } 这样遮罩层就会占满屏了 补充知识:vue 锁定蒙版 不让
-
vue.js引入外部CSS样式和外部JS文件的方法
学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/
-
Laravel框架Auth用户认证操作实例分析
本文实例讲述了Laravel框架Auth用户认证操作.分享给大家供大家参考,具体如下: (1)生成Auth所需文件 打开phpstorm的命令行: php artisan make:auth 生成成功后,打开web.php, 发现多了如下代码: Auth::routes(); Route::get('/home', 'HomeController@index')->name('home'); 然后访问 localhost/laravel/public/home就可以看到登录页面, 如果样式不正常
-
Laravel5.1 框架分页展示实现方法实例分析
本文实例讲述了Laravel5.1 框架分页展示实现方法.分享给大家供大家参考,具体如下: Laravel为我们提供了一套分页的逻辑,我们无需自己实现分页逻辑,只需要执行几个简单的方法就能实现漂亮的分页. 1 simplePaginate 这是一种只显示上一页下一页的样式分页,我们来看看怎么用: class PostController extends Controller { public function index() { // $posts = Post::simplePaginate(
-
vue学习笔记之作用域插槽实例分析
本文实例讲述了vue学习笔记之作用域插槽.分享给大家供大家参考,具体如下: <child></child> Vue.component('child', { data: function () { return { list: [1, 2, 3] } }, template: '<div> <ul> <li v-for="item of list">{{item}}</li> </ul> </di
-
vue路由守卫+登录态管理实例分析
本文实例讲述了vue路由守卫+登录态管理.分享给大家供大家参考,具体如下: 在路由文件需要守卫的path后面加上meta {path: '/home',component: home,meta:{requireAuth:true}} 在main.js里面加上 //路由守卫 router.beforeEach((to, from, next) => { console.log(to); console.log(from); if (to.meta.requireAuth) { // 判断该路由是否
-
vue.js计算属性computed用法实例分析
本文实例讲述了vue.js计算属性computed用法.分享给大家供大家参考,具体如下: 需求:数据msg值为12345,我们现在需要反向显示成54321. 在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> &l
-
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
本文实例讲述了Zend Framework框架Zend_Db_Table_Rowset用法.分享给大家供大家参考,具体如下: 1. 简介 Zend_Db_Table_Rowset是 Zend_Db_Table_Row对象集合的迭代器.通常来说,你不可以自己实例化Zend_Db_Table_Rowset, 而是通过调用Zend_Db_Table::find()方法或者fetchAll()方法将Zend_Db_Table_Rowset作为 结果数据返回过来.接下来就可以遍历Zend_Db_Table
-
thinkphp5.1框架容器与依赖注入实例分析
本文实例讲述了thinkphp5.1框架容器与依赖注入.分享给大家供大家参考,具体如下: 容器----/thinkphp/library/think/Container.php 依赖注入:将对象类型的数据,以参数的方式传到方法中(解决向类中的方法传对象的问题) 绑定一个类到容器: public function bindClass() { //把一个类放到容器中:相当于注册到容器中 \think\Container::set('tmp(别名)','\app\common\Temp(实例)');