• Vue 官方文档2.x教程学习笔记 1 基础 1.6 Class 与 Style 绑定 1.6.2 绑定内联样式

    Vue 官方文档2.x教程学习笔记

    文章目录

    1 基础

    1.6 Class 与 Style 绑定
    1.6.2 绑定内联样式

    【对象语法】

    v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。

    CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">DingJiaxiongdiv>
div>


<script src="../js/vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    浏览器渲染结果

    在这里插入图片描述

    直接绑定到一个样式对象通常更好，这会让模板更清晰：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <div v-bind:style="styleObject">DingJiaxiongdiv>
div>


<script src="../js/vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObject: {
                color: 'red',
                fontSize: '50px'
            }
        }
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    浏览器渲染结果

    在这里插入图片描述

    同样的，对象语法常常结合返回对象的计算属性使用。

    【数组语法】

    v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <div v-bind:style="[baseStyles, overridingStyles]">DingJiaxiongdiv>
div>


<script src="../js/vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            baseStyles: {
                color: 'red',
                fontSize: '50px'
            },
            overridingStyles: {
                textAlign : 'center'
            }
        }
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    浏览器渲染效果

    在这里插入图片描述

    【自动添加前缀】

    当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

    在这里插入图片描述

    啊这…

    谷歌一下这是啥东西【我弄错意思了？】

    哦，我现在就是谷歌浏览器，它支持不带前缀的这个属性写法。…【我也不知道对不对】

    【多重值】

    2.3.0+

    从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">div>

    • 1

    这样写只会渲染数组中最后一个被浏览器支持的值。

    在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

    在这里插入图片描述

  • 相关阅读:
    【BOOST C++ 11 时钟数据】（3）时间（11-14）
    小米/华为怎样找回手机联系人？告别焦虑，2个紧急救援指南
    基于机智云物联网平台与4G DTU远程车库门
    2022年十次最大的云中断
    Feign 如何设置超时时间
    VMware17.0.1密匙/下载/安装Ubuntu18.04
    Springboot魅力乡村管理系统srb4s计算机毕业设计-课程设计-期末作业-毕设程序代做
    自适应滤波算法及例程
    有没有好用的视频剪辑软件分享？
    删除不成功的免密登录重新做免密
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/128196917