den0-5-绑定内联样式

小春蛙

于 2023-11-28 19:18:49 发布

阅读量18

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/2201_75782445/article/details/134674701

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

   <div id="app">
<!--绑定属性值-->
       <div v-bind:style="{backgroundColor:pink,width:width,height:}">
<!--绑定样式对象-->
           <div v-bind:style="mydiv"></div>
       </div>
   </div>
   <script>
       var vm=new Vue({
           el:'#app',
           data:{
               mydiv:{backgroundColor:'red',width:'100px',height:'100px'},
               pink:'100%',
               width:'100%',
               heught:'200px'
           }
       })
   </script>
</body>
</html>