8. Vue - v-bind 绑定 Style 【对象语法和数组语法】
2022-05-31 17:15:37

之前说过 v-bind 这东西可以绑class 那么必然也可以绑定实style 了，而且也有对象语法和数组语法：

先来对象语法：

因为我们知道对象语句是键 - 值对的，所以呢我们的键是 style 的属性，值是对应的值即可，值可以是变量也可以是字符串，如果值不是Vue中的变量，值要加单引号！不然报错.

还有一个点：比如字体大小 font-Size 其中可以省略掉-，有些版本不省略会报错的.

Vue会当做一个变量来解析.

例如我要字体大小50px 而且字体颜色是红色，那么：

错误写法：

<div class="app">
<!--    下面的是错误写法，因为VUE会把 50px  和 red 当做一个变量来解析，找不到那就报错了    -->
        <p :style="{fontSize: 50px,color:red}">颜色：red 字体大小： 50 px</p>
    </div>

正确写法：

<div class="app">
        <p :style="{fontSize: '50px',color:'red'}">颜色：red 字体大小： 50 px</p>
    </div>

    <script>
        const app = new Vue({
            el:".app",
        })
    </script>

，所以你的值可以是一个变量：【在Vue中的data先定义哦】

<div class="app">
        <p :style="{fontSize: size + 'px',color:fontColor}">颜色：red 字体大小： 50 px</p>
    </div>

    <script>
        const app = new Vue({
            el:".app",
            data:{
                size:50,
                fontColor:"red"
            }
        })
    </script>

所以呢绑定这个有什么用，因为响应式用户就可以在你这里很快速选择某些样式然后直接改变即可，复用性挺高.

数组语法：【比较不用】

因为我们知道数组是没有键值对的所以呢我们可以直接在数组里面加Vue的变量，变量里面都定义好的数据（键值对）：

<div class="app">
        <p :style="[color_red,font_size]">颜色：red 字体大小： 50 px</p>
    </div>

    <script>
        const app = new Vue({
            el:".app",
            data:{
                color_red:{color:'red'},
                font_size:{fontSize:'50px'}
            }
        })
    </script>

看代码可知道这样的话肯定要先学对象语法，在学这玩意，所以还不如直接用对象语法呢，

Tips：Vue中变量定义的键值可以有很多很多；上面定义了一个，所以主题逻辑就可以这样写了，

其次你完全也可以在数组里直接干[{xxx},{xx}] 但很画蛇添足没用.

作者：咸瑜

本文摘自：https://blog.51cto.com/u

更多科技新闻 ......

8. Vue - v-bind 绑定 Style 【对象语法 和 数组语法】 2022-05-31 17:15:37

推荐内容

8. Vue - v-bind 绑定 Style 【对象语法和数组语法】
2022-05-31 17:15:37