<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p style="color:gray;font-size:18px; font-style:italic;">vue 2.0 从入门到实战</p>
        <p v-bind:style="styleStr">vue 2.0 从入门到实战</p>
        <p :style="styleObj1">vue 2.0 从入门到实战</p>
        <p :style="styleObj2">vue 2.0 从入门到实战</p>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    styleStr:'color:gray;font-size:18px;font-style:italic;',
                    styleArr:['color-gray','size-18','style-italic'],
                    styleObj1:{
                        'color': -1?'gray':'black',
                        'font-size':'18px',
                        'font-style':'italic'
                    },
                    styleOjb2:{
                        'color:':0?'gray':'',
                        'font-size:':'18px',
                        'font-style':null ? 'italic':'',
                    }
                }
            }
        })
    </script>

    <style>
        .color-gray{
            color: gray;
        }

        .size-18{
            font-size: 18px;
        }

        .style-italic{
            font-style: italic;
        }
    </style>
</body>
</html>