Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>绑定内联样式 </title>
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        </head>
​
        <body>
        绑定内联样式：键代表 style 的属性值，值就代表属性对应的值了 <br>
        切记：vue中只要是大写字母都会转换成 - 加 小写 
​
        fontSize 转化成 font-size
        dsfASDghG 转化成 dsf-a-s-dgh-g
        
        <div id="app">
            style 对象语法 <br>
            <div :style = "{ 'color': color, 'fontSize': fontSize } ">大家看看</div>
            
            <br>
            style 数组语法 <br> 此用法不推荐用，也没什么人用
            <div :style="[styleA,styleB]">我和你</div>
        </div>
​
        <script>
            var app = new Vue({
                el: '#app',
                data:{
                   color: 'red',
                   fontSize: 16,
                   styleA: {
                       color: 'pink',
                       fontSize: 16
                   },
                   styleB: {
                       textAlign: 'center',
                       background: 'green'
                   }                 
                }
            })       
        </script>
        </body>
        </html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lovexwupro
0viewers