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 ...
随机推荐
- 必应语音API(Bing text to speech API)
前言 Link : Microsoft Speech API overview 通过这个链接,大致了解Bing speech API的语音识别和语音合成两部分, 这次是需要用到TTS,所以就直接看TT ...
- [转帖]浅析java程序的执行过程
浅析java程序的执行过程 转帖来源: https://www.cnblogs.com/wangjiming/p/10315983.html 之前学习过 这一块东西 但是感觉理解的不深刻. copy一 ...
- Docker 网络部分的简单学习以及转帖别人的blog
1. 感谢一下 大神: http://www.cnblogs.com/sparkdev/ 最近有时间的话 就会读一下他的博客.学习了解docker相关的知识 今天简单做了下 测试 在这里面记录一下. ...
- Qt__QWidget::update()与Qwidget::repaint()的区别
QT事件的产生 1.操作系统产生 操作系统将获取的事件,比如鼠标按键,键盘按键等keyPressEvent,keyReleaseEvent,mousePressEvent,mouseReleaseEv ...
- jmeter作用域规则
创建测试计划时,会创建一个有序的一系列将要被执行的请求列表,这些请求通常被组织在有序的控制器下 一些控制器会影响包含在它下面的请求顺序 ,这些特殊的控制器可以参考这里:the component re ...
- hdu 4348 To the moon （主席树 区间更新）
链接: http://acm.hdu.edu.cn/showproblem.php?pid=4348 题意: 4种操作: C l r c 区间[l,r]加c,时间+1 Q l r 询问当前时 ...
- BZOJ2839 : 集合计数 (广义容斥定理)
题目 一个有 \(N\) 个 元素的集合有 \(2^N\) 个不同子集(包含空集), 现在要在这 \(2^N\) 个集合中取出若干集合(至少一个), 使得它们的交集的元素个数为 \(K\) ,求取法的 ...
- 上传大数据到SharePoint 2010
今天终于把近5G的数据上传到了SharePoint2010站点上,上传过程中发现几个要注意的问题: 1. 用360浏览器打开SP 2010站点,发现在workspace同步和windows explo ...
- 批量导入导出站点权限site permissions
批量导入站点权限 cls $Web = Get-SPWeb "http://16.178.115.14:91/" Get-Content c:\export\account.t ...
- 【转】hex和bin文件格式的区别
hex和bin文件格式的区别 Intel HEX文件是记录文本行的ASCII文本文件,在Intel HEX文件中,每一行是一个HEX记录,由十六进制数组成的机器码或者数据常量.Intel HEX文件经 ...