vue基础篇---class样式绑定
因为class的绑定在实际的工作中会经常用到。所以特意记录一下，有好几种方法。
对象绑定方法，另外一个值来控制显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="vue_det">
<!--active是上面定义好的类名，flag是你设置的布尔变量-->
<h1 :class="{active:flag}" @click="details">site : {{site}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
flag:false
},
methods: {
details: function() {
this.flag=!this.flag; //点击来控制字体颜色切换
}
}
})
</script>
</body>
</html>
数组的方法，数组里面的变量就是class的类名（同理数组里面可以放多个类名）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="vue_det">
<!--active是上面定义好的类名-->
<h1 :class="[active]" @click="details">site : {{site}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
active:''
},
methods: {
details: function() {
this.active=this.active==="active"?"":"active"; //点击来控制字体颜色切换
}
}
})
</script>
</body>
</html>
style绑定对象的方式，后面绑定的对象的值就是style的样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style>
.active{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div id="vue_det">
<!--active是上面定义好的类名-->
<sapn :style="obj" @click="details">site : {{site}}</sapn>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
obj:{
color:'red',
fontSize : '30px'
}
},
methods: {
details: function() {
this.obj.color='green'; //点击来控制字体颜色切换
}
}
})
</script>
</body>
</html>
style绑定数组的方式，后面的数组的值可以有多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<!--active是上面定义好的类名-->
<sapn :style="[obj,obj2]" @click="details">site : {{site}}</sapn>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
obj:{
color:'red'
},
obj2:{
fontSize : '30px'
}
},
methods: {
details: function() {
this.obj.color='green'; //点击来控制字体颜色切换
}
}
})
</script>
</body>
</html>
vue基础篇---class样式绑定的更多相关文章
- Vue 基础篇
Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...
- vue 自学笔记(4): 样式绑定与条件渲染
一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...
- Vue 基础篇---computed 和 watch
最近在看前端 Vue方面的基础知识,虽然前段时间也做了一些vue方面的小项目,但总觉得对vue掌握的不够 所以对vue基础知识需要注意的地方重新撸一遍,可能比较零碎,看到那块就写哪块吧 1.vue中的 ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- vue基础——表单输入绑定
一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...
- vue基础——Class与Style绑定
Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...
- vue基础---表单输入绑定
[一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
- vue基础---Class 与 Style 绑定
[一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...
- vue基础篇---vue组件《2》
定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...
随机推荐
- 3-palindrome CodeForces - 805B (思维)
In the beginning of the new year Keivan decided to reverse his name. He doesn't like palindromes, so ...
- Java Script正则表达式语法学习
今天在做页面交互验证时,在HTML里面第一反应居然用了Java 处理正则表达式的语法... ---------------------------------题记 学习来源 http://www.ru ...
- Gradle vs Maven Comparison
https://gradle.org/maven-vs-gradle/ Maven需要搭建本地仓库:Gradle直接集成了仓库. ??? 从Maven转移到Gradle,对于如何使用类似于Maven的 ...
- [转帖]新的Linux后门开始肆虐 主要攻击中国服务器
新的Linux后门开始肆虐 主要攻击中国服务器 https://www.cnbeta.com/articles/tech/815639.htm 一种新的 Linux 系统后门已经开始肆虐,并主要运行在 ...
- linux_修改文件权限chmod 、改变文件/目录所有者chown
chmod使用事例 数字方法 chmod -R 751 [FILE] ugoa方法 chmod -R u=wrx,g=rx,o=x [FILE] 说明 chmod [OPTION] [MODE] [F ...
- selenium之安装和登陆操作举例
安装selenium: python -m pip install selenium-3.4.3-py2.py3-none-any.whl 下载对应浏览器版本的驱动,且在环境变量PATH中指定驱动程序 ...
- CSS实现水平居中的5种思路
前面的话 水平居中是经常遇到的问题.看似方法较多,条条大路通罗马.但系统梳理下,其实都围绕着几个思路展开.本文将介绍关于水平居中的5种思路 text-align [思路一]:在父元素中设置text-a ...
- map内置函数分析所得到的思路
map:会根据提供的函数对指定序列做映射. map(func, *iterables) --> map object Make an iterator that computes the fun ...
- BZOJ2724 [Violet]蒲公英（分块）
区间众数.分块,预处理任意两块间所有数的众数,和每块中所有数的出现次数的前缀和.查询时对不是整块的部分暴力,显然只有这里出现的数可能更新答案.于是可以优美地做到O(n√n). #include< ...
- log4net 单独项目
首先参考:http://blog.csdn.net/feiying008/article/details/45440547 有时,我们需要将日志功能作为单独模块,用来以后嫁接到其他项目. 今天就来看看 ...