<!DOCTYPE html>
<html lang="zh">
<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>自学vue：v-bind:style的用法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 对象写法 -->
<h3 v-bind:style = "{color:'red'}">{{message}}</h3>
<!-- 数组写法 -->
<!-- 值得注意的是数组写法是写入一个变量，变量在data处用对象类型重新补入 -->
<h3 v-bind:style = "[color,background]">{{message}}</h3>
</div>
</body>
<script type="text/javascript">
//v-bind:style 用于动态绑定样式
//v-bind:style 有两种写法写入样式，别分是对象写法，数组写法
//对象写法如: v-bind:style = “color:’red’” 值得注意的是，这里的第一层引号是使用双引号
//数组写法如: v-bind:style = [var,var],所添加数组内的变量，需要在data内重新赋值为对象类型
let app = new Vue({
el:’#app’,
data:{
message:’v-bind:style’,
color:{color:’red’},
background:{background:’blue’}
}
})
</script>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
