8.vue 内联样式（实现侧边栏）

最新推荐文章于 2024-04-28 18:37:34 发布

7TribeZ

最新推荐文章于 2024-04-28 18:37:34 发布

阅读量692

点赞数

分类专栏： VUE 文章标签： js vue

本文链接：https://blog.csdn.net/wildand/article/details/108359431

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

多重值

2.3.0+

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

内联样式举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div style="width: 100px;height: 100px;background:skyblue;">
			</div>
			<!-- CSS内联样式变量拼接 -->
			<div style="width: 100px;height: 100px;background:skyblue;" 
			:style="{border:borderWidth+'px solid red',padding:paddingWidth+'px'}">
			</div>
			<!-- CSS内联样式放置对象 -->
			<div :style="styleObj">						
			</div>
			<!-- CSS数组的方式拼接 -->
			<div :style="styleArr"></div>
		</div>
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					borderWidth:50,
					paddingWidth:30,
					styleObj:{
						width:"200px",
						height:"300px",
						padding:"50px",
						'background-color':"skyblue"
						
					},
					styleArr:[
						{
							width:"200px",
							height:"300px",
							padding:"50px",
							'background-color':"skyblue"						
						},
						{
							border:"30px solid yellow"
						}
					]
				}
			})
		</script>
	</body>
</html>

:class实现菜单栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.page{
				width: 100vw;
				height: 100vh;
				background-color:#efeffe;
			}
			.rMenu{
				width: 50vw;
				height: 100vh;
				position: fixed;
				left: 0;
				top:0;
				/* 沿X轴向右平移100个视口单位 */
				transform:translateX(100vw);
				background:skyblue;
				/* 	过度动画 */
				transition: transform 3s; 
				
			}
			.active{
				transform: translateX(50vw);
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="page">
				首页
				<button @click="toggleMenu" type="button">切换侧边栏</button>
			</div>
			<div class="rMenu" :class="{active:isShow}">
				侧边栏
			</div>
		</div>

		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					toggleMenu:function(){
						this.isShow=!this.isShow
					}
				}
			})
		</script>
	</body>
</html>

:style实现菜单栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.page{
				width: 100vw;
				height: 100vh;
				background-color:#efeffe;
			}
			.rMenu{
				width: 50vw;
				height: 100vh;
				position: fixed;
				left: 0;
				top:0;
				/* 沿X轴向右平移100个视口单位 */
				transform:translateX(100vw);
				background:skyblue;
				/* 	过度动画 */
				transition: transform 3s; 
				
			}
			.active{
				transform: translateX(50vw);
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="page">
				首页
				<button @click="toggleMenu" type="button">切换侧边栏</button>
			</div>
			<div class="rMenu" :style="{transform:' translateX('+menuWidth+'vw)'}">
				侧边栏
			</div>
		</div>

		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
			
					menuWidth:100
				},
				methods:{
					toggleMenu:function(){
						if(this.menuWidth==100){
							this.menuWidth=70
						}else{
							this.menuWidth=100
						}
					}
				}
			})
		</script>
	</body>
</html>

7TribeZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.vue 内联样式（实现侧边栏）

绑定内联样式对象语法v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { activeColor: 'red.
复制链接

扫一扫