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 ...
随机推荐
- 作业二 —— 分布式版本控制系统Git的安装与使用
作业要求源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103 1.安装Git,配置用户名与邮箱. 安装Windows版的Git ...
- 重载(overload)、覆盖(override)、隐藏(hide)的区别
http://blog.csdn.net/yanjun_1982/archive/2005/09/02/470405.aspx 重载是指不同的函数使用相同的函数名,但是函数的参数个数或类型不同.调用的 ...
- PAT 1012 数字分类
https://pintia.cn/problem-sets/994805260223102976/problems/994805311146147840 给定一系列正整数,请按要求对数字进行分类,并 ...
- NodeJS简记
C:\Users\Administrator>node > .help .break Sometimes you get stuck, this gets you out .clear A ...
- HTML5 Base64_encoding_and_decoding
https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding In JavaSc ...
- [转帖] select、poll、epoll之间的区别总结[整理] + 知乎大神解答 https://blog.csdn.net/qq546770908/article/details/53082870 不过图都裂了.
select.poll.epoll之间的区别总结[整理] + 知乎大神解答 2016年11月08日 15:37:15 阅读数:2569 http://www.cnblogs.com/Anker/p/3 ...
- msql 复杂练习
https://blog.csdn.net/xiao__oaix/article/details/78122294 customer表branch 表account 表 depositor 表loan ...
- 微信小程序开发4之form表单与弹出层
第一 表单的提交和重置 第二 radio组件 第三 checkbox组件 第四 loading组件 第五 toast组件 第六 modal组件
- Python——socketsever模块
1.作用:同时与多个客户端通信 import socketserver class MyServer(skcketserver.BaseRequestHandler): def handle(self ...
- Python中正则表达式的巧妙使用
字符串的匹配查询 re模块中的findall函数可以对指定的字符串进行遍历匹配,获取字符串中所有匹配的子串,并返回一个列表结果.该函数的参数含义如下: findall(pattern, string, ...