Vue之style的用法
Vue中style的用法总结如下：
v-bind:style 简写:style
1.基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="{color:'red'}">文字...</strong>
</div>
</body>
</html>
描述：
<strong :style="{color:'red'}">文字...</strong>
其中的red是class的
结果：
2.采用数组形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
c:{color:'red'}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c]">文字...</strong>
</div>
</body>
</html>
描述：
采用数组的形式，设置变量c,在data中以对象的形式设置style属性
结果：
3.使用数组的形式，设置多个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
c:{color:'red'},
b:{backgroundColor:'blue'}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c,b]">文字...</strong>
</div>
</body>
</html>
描述：
和第二种一样，可以设置多个属性
结果：
4.使用设置一个变量的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:{
color:'red',
backgroundColor:'gray'
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="a">文字...</strong>
</div>
</body>
</html>
Vue之style的用法的更多相关文章
- Vue中directives的用法
关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- Vue组件的继承用法
Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...
- 练习vue(class,style属性)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 深入理解VUE样式style层次分析
刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue中mixin的用法
在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...
- Vue.js style(内联样式)
Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...
- Vue插件编写、用法详解（附demo）
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
- Vue中的v-cloak用法
v-cloak 的作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...
随机推荐
- 微型神经网络库MicroGrad-基于标量自动微分的类pytorch接口的深度学习框架
一.MicroGrad MicroGrad是大牛Andrej Karpathy写的一个非常轻量级别的神经网络库(框架),其基本构成为一个90行python代码的标量反向传播(自动微分)引擎,以及在此基 ...
- clickhouse使用入门
转载请注明出处(-￣▽￣)-严禁用于商业目的的转载- 导语:同学,你也不想你根本不懂ClickHouse,却赶鸭子上架使用的事情被其他人知道吧? 写在前面:本文旨在让原先有一定SQL基础的人快速简单了 ...
- 从数据库中读取数据并写入到Excle电子表格之1
//获取数据 using (SqlDataReader reader = Alian_SQL_Helper.SQL_Helper .ExecuteReader( "select CC_Aut ...
- ZEGO全新语音聊天室方案，2小时复刻 Clubhouse
真的火了! 新晋带货王马斯克在 Clubhouse"开房"之后,直接让 Clubhouse 爆火出圈,据说,Clubhouse 平台邀请码现在在ebay上已经卖到了快200刀一个. ...
- 即构SDK5月迭代：新增声道选择、网络探测、智能消噪等功能，打造更优的视听体验
即构SDK5月份的迭代更新如期而至,本月互动视频(LiveRoom).实时语音(AudioRoom)两大SDK以及录制插件(PlayRecord)均有新功能上线.新增的声道选择.变调控制.智能消噪.枚 ...
- PTA 21级数据结构与算法实验7—查找表
目录 7-1 电话聊天狂人 7-2 两个有序序列的中位数 7-3 词频统计 7-4 集合相似度 7-5 悄悄关注 7-6 单身狗 7-7 词典 7-8 这是二叉搜索树吗? 7-9 二叉搜索树 7-1 ...
- [nginx]proxy_cache缓存系统
前言 proxy_cache是nginx内置的一个缓存系统,可实现减小后端负载的作用. 常用参数说明 参数 说明 proxy_cache_path 缓存文件路径.level表示目录层级,1:2表示两个 ...
- 让C#调用vue组件里的方法
前言:web页面开发时采用的是vue开发的,后台语言是C# 需求:后台需要通过浏览器调用vue组件的方法 c# 可以调用xxx.html 中的script引用的js中定义的方法是可以调用的, 之前c# ...
- MIT6.s081/6.828 lectrue07：Page faults 以及 Lab5 心得
本篇博客主要是复习 MIT6.s081/6.828 lectrue07:Page faults 以及记录 Lab5 :COW fork 的心得 值得一提的是,2020 年之前的版本第 5 个 lab ...
- 《SQLi-Labs》03. Less 11~15
@ 目录 索引 Less-11 题解 原理 Less-12 题解 Less-13 题解 Less-14 题解 Less-15 题解 原理 sqli.开启新坑. 索引 Less-11:POST 回显注入 ...