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 ...
随机推荐
- PAT (Basic Level) Practice 1001 害死人不偿命的(3n+1)猜想
https://pintia.cn/problem-sets/994805260223102976/problems/994805325918486528 卡拉兹(Callatz)猜想: 对任何一个自 ...
- Java控制台常用命令
http://docs.oracle.com/javase/7/docs/technotes/tools/windows/java.html javaw是java的带console版本,其他一致. h ...
- QC
IQC:Incoming Quality Control 意思是来料的质量控制 来料 IPQC:InPut Process Quality Control 过程质量控制 来料 FQC:Final ...
- JavaScript中的Date对象在IOS中的“大坑”
在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象. 但是在IOS5版本里面的Safari解释ne ...
- XE2 运行时 item not found的解决办法
.net类库的原因. 将C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\CONFIG下面的 machine.config.default 改名为machin ...
- jvm学习三：自定义ClassLoader
第一节我们说过一句话:所有的Java虚拟机实现必须在每个类或接口被Java程序“ 首次主动使用”时才初始化他们 但类加载器却不是这样:类加载器不需要等到某个类“被首次主动使用”时才加载类 两句话的区别 ...
- js運算符
運算符算術運算符.邏輯運算符.賦值運算符.比較運算符.條件運算符 字符串的合併,用+,如果是字符串和數字用+連接,則當做字符串合併. 條件運算符:if(條件)?語句1,語句2:
- BZOJ4764弹飞大爷——LCT
题目描述 自从WC退役以来,大爷是越来越懒惰了.为了帮助他活动筋骨,也是受到了弹飞绵羊一题的启发,机房的小伙伴们 决定齐心合力构造一个下面这样的序列.这个序列共有N项,每项都代表了一个小伙伴的力量值, ...
- Luogu3676 小清新数据结构题（树链剖分+线段树）
先不考虑换根.考虑修改某个点权值对答案的影响.显然这只会改变其祖先的子树权值和,设某祖先原子树权值和为s,修改后权值增加了x,则对答案的影响为(s+x)2-s2=2sx+x2.可以发现只要维护每个点到 ...
- java 使用 WebUploader
参考: http://blog.csdn.net/finalAmativeness/article/details/54668090 最近项目需要多文件上传. 所以使用了 baidu的 webuplo ...