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 ...
随机推荐
- FZU软工实践–团队成员交换交接情况
0.前言 本次交接主要是为了之后Beta冲刺工作可以更加顺利而进行的.因为我跟其他队友交互不够方便,而且我们项目当前比较缺做前端的人员,后端功能已基本实现.所以我换出来了.希望大家可以顺顺利利做完一步 ...
- 加载spring容器
import org.springframework.context.ApplicationContext; import org.springframework.context.support.Cl ...
- Qt__绘制系统
Qt绘制系统简介 Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制.整个绘图系统基于QPainter,QPainterDevice和QPaintEngine三个类. QPaint ...
- Bootstrap 引入文件顺序及IE兼容性js
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- NCO
NCO 摘自百度百科 (数字振荡器) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . 数字控制振荡器(NCO,numerically controlled oscillator)是 ...
- multi_index_container 多索引容器
multi_index_container是c++ boost库中的一个多索引的容器.因工作中用到了,特来测试试用. #include "stdafx.h" #include &q ...
- BZOJ2653middle——二分答案+可持久化线段树
题目描述 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个 长度为n的序列s.回答Q个这样的询问:s的左端点在[a,b]之间,右端点在 ...
- 【 HDU1081 】 To The Max （最大子矩阵和）
题目链接 Problem - 1081 题意 Given a two-dimensional array of positive and negative integers, a sub-rectan ...
- Java编程,打印昨天的当前时刻
public class Demo { /* * Java编程,打印昨天的当前时刻 */ public static void main(String[] args){ Calendar ca ...
- Android 判定手机是否root
Android获取手机root的状态 package com.app.demo; import java.io.File; import android.app.Activity; import an ...