vue-例3-12v-bind对象语法绑定.html

最新推荐文章于 2024-05-10 18:15:56 发布

原创最新推荐文章于 2024-05-10 18:15:56 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue 专栏收录该内容

661 篇文章

订阅专栏

该文章演示了如何在Vue.js应用中使用v-bind指令结合对象语法来动态绑定元素的行内样式，包括颜色和字体大小。示例展示了两种不同的对象语法用法，一种是直接在模板中声明，另一种是通过data属性引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind对象语法绑定</title>
</head>
<body>
    <h1>绑定行内样式，采用对象语法</h1>
    <div id="app">
        <div v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}">对象语法方式</div>
        <div v-bind:style="styleObject">对象语法方式</div>
    </div>

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

    <script>
        let vm = new Vue({
           el:'#app',
           data:{
               activeColor:'red',
               fontSize:30,
               styleObject:{
                   color:'red',
                   fontSize:'23px',
               }
           }
        });
    </script>
</body>
</html>