黑马程序员技术交流社区

标题: 【郑州校区】前端笔记Vue项目day1(六) [打印本页]

作者: 谷粒姐姐    时间: 2019-8-15 17:52
标题: 【郑州校区】前端笔记Vue项目day1(六)
绑定style
[AppleScript] 纯文本查看 复制代码
<div v-bind:style="styleObject">绑定样式对象</div>'

<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来)    -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>

<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>


<script>
        new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px',
          background:'red'
        },
        activeColor: 'green',
                   fontSize: "30px"
      },
      styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }

</script>

分支结构v-if 使用场景






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2