Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
来源：互联网 发布：js字符串任意格式 编辑：程序博客网 时间：2024/06/05 18:08
2. Vue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
activeColor:"green",
fontSize:20
}
})
</script>
</body>
</html>
运行结果：
上述代码中，我们通过v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'设置的div的字体颜色和字体大小。
我们也可以将div的样式绑定在一个样式对象上，这样看起来会更清晰
下面通过绑定样式对象实现和上个例子一样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="styleObj">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
styleObj:{
color:"green",
fontSize:"20px"
}
}
})
</script>
</body>
</html>
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[baseStyles,overridingStyles]">51code</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
baseStyles:{
color:"green",
fontSize:"20px"
},
overridingStyles:{
"background-color":"yellow"
}
}
})
</script>
</body>
</html>
- Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
- Vue.js学习系列（三十）-- Vue.js样式绑定（一）
- Vue.js学习系列（三十一）-- Vue.js样式绑定（二）
- Vue.js学习系列（三十二）-- Vue.js样式绑定（三）
- Vue.js学习系列（三十三）-- Vue.js样式绑定（四）
- vue.js样式绑定
- Vue.js学习系列（五）---vuejs指令
- Vue.js学习系列（三十五）-- Vue.js事件监听
- Vue.js学习系列（三十七）-- Vue.js表单
- Vue.js学习系列（四十二）-- Vue.js组件
- 前端框架vue.js系列（3）：样式语法
- Vue.js学习 Item6 -- Class 与 样式绑定
- vue学习系列-认识vue.js
- Vue.js学习系列（三十八）-- Vue.js表单 （二）
- Vue.js学习系列（三十九）-- Vue.js表单 （三）
- Vue.js学习系列（三）---第一个vue.js程序
- Vue.js 学习（二）
- Vue.js 学习（三）
- 和为T（BFS）
- Http请求格式
- 【笔记】关于PullToRefeshLibrary的小应用
- 电脑硬件知识入门之机械键盘篇
- 对类的对象批量声明时可以使用数组形式
- Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
- 二叉树基础
- MOSFET知识点
- Android Studio 工程版本控制过滤文件
- 网站域名教程须知
- 最短路径---Floyd
- Android 实现简单轮询效果
- Grok Debugger
- R 错误: XML content does not seem to be XML: 'input.xml'
