VUE3(三)v-bind和v-on

同理,v-bind绑定style的对象语法:

    <template id="my-app">
        <div :style="{color: finalColor,'font-size': '30px'}">哈哈</div>
        <div :style="{color: finalColor,fontSize: '30px'}">哈哈</div>
        <div :style="{color: finalColor,fontSize: finalSize + 'px'}">哈哈</div>
        <div :style="finalStyleObj">哈哈哈</div>
        <div :style="getFinalStyleObj()">哈哈哈</div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    finalColor: 'red',
                    finalSize: 50,
                    finalStyleObj:{
                        color: 'red',
                        fontSize: '70px',
                        backgroundColor: 'black'
                    }
                }
            },
            methods:{
                getFinalStyleObj(){
                    return {
                        color: 'red',
                        fontSize: '70px',
                        backgroundColor: 'black'
                    }
                }
            }
        };

发表评论