第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式

Z时代
2024-01-10
分类：综合

vue

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <title>Document</title>
 8     <!--1.导入Vue的包-->
 9     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
10   </head>
11 
12   <body>
13       <div id="app">
14       <!-- 对象就是无序键值对的集合 -->
15        <!--  <h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>   -->   
16         <h1 :style="styleObj1">这是一个h1</h1>   
17         <h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>        
18       </div>
19 
20 
21       <script>
22           //创建 Vue 实例，得到 ViewModel
23           var vm =  new Vue({
24               el:'#app',
25         data:{
26          styleObj1:{color:'red','font-weight':200},
27          styleObj2:{'font-style':'italic'}
28         },
29         methods:{}
30           });
31       </script>
32   </body>
33 </html>