vue--绑定样式

最新推荐文章于 2024-07-16 14:59:12 发布

weixin_44889992

最新推荐文章于 2024-07-16 14:59:12 发布

阅读量81

点赞数

分类专栏： vue 文章标签： vue--绑定样式

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89389619

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

style

为什么要绑定样式呢？

A: 样式有几种使用形式

style双标签嵌入样式(内联)
行内样式
外部引用
@import(’./csss/…’)

数据 --控制–样式—》功能效果
样式要和数据绑定–》 v-bind
样式的绑定形式
A: 对象

<div :style = "{width:'50px'}"></div>
<div :style = "style"></div>

第二种将数据放在data中

B: 数组

<div
:style = "[{width:'50px',height:'50px',background:'yellow'}]"
></div>
<div
:style = "[style]"
></div>
<div
:style = "[styleFlag?style:'']"
></div>

举例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../basic-source/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h3>样式</h3>
<div style="width:100px;height:100px;background: red"></div>
<hr>
<h3>样式绑定-对象形式</h3>
<div :style="{width:'100px',height:'100px',background:'red'}"></div>
<div :style="style"></div>
<hr>
<h3>样式绑定-数组形式</h3>
<div :style="[{width:'100px',height:'100px',background:'red'}]"></div>
<div :style="[style]"></div>
<div :style="[styleFlage?style:'']"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
styleFlage: true,
style: {
width: '100px',
height: '100px',
background: 'red',
margin: '5px'
}
}
})
</script>
</html>

weixin_44889992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue--绑定样式

style为什么要绑定样式呢？A: 样式有几种使用形式style双标签嵌入样式(内联)行内样式外部引用@import(’./csss/…’)数据 --控制–样式—》功能效果样式要和数据绑定–》 v-bind样式的绑定形式A: 对象<div :style = "{width:'50px'}"></div><div :st...
复制链接

扫一扫

专栏目录