04-Vue的动态绑定属性(二)

最新推荐文章于 2022-09-24 20:52:33 发布

蓝带915

最新推荐文章于 2022-09-24 20:52:33 发布

阅读量331

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42647711/article/details/104454614

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-bind动态绑定style(对象语法)

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2
        :style="{ fontSize: finalSize, backgroundColor: finalColor }"
      >
        {{message}}
      </h2>
      <h2 :style="getStyles()">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          finalSize: "100px",
          finalColor: "red"
        },
        methods: {
          getStyles: function() {
            return {
              fontSize: this.finalSize,
              backgroundColor: this.finalColor
            }
          }
        }
      })
    </script>
  </body>
</html>

1.为什么用:style

如果样式代码中出现复用变量，即多处都想使用font-size等于’10px’(这里只是一个例子，其实css选择器比这个方便，后期会讲当style是父组件传给子组件的参数时用这个比较多)，那多处都可以写成如下代码

<h2 :style="{fontSize: '50px'">{{message}}</h2>
<span :style="{fontSize: '50px'">{{message}}</span>

注：这里的50px一定要用引号，不然vue会将其当作变量处理，结果显然是找不到
如果有三十处都是这样写法，这肯定是违背了复用原则，如果需求突然更改，这时当然不能更改每处(工作量庞大)，所以可以在开发时，就将该font-size设置成一个变量，正如上文代码，将finalSize设置为’100px’，这时再需要更改只要更改finalSize的值即可，如果部分更改，可以封装多个变量。

2.写作规范

<h2 :style="{key(属性名): value(属性值)}"></h2>

同样，如果你感觉写在html里面不是很美观，也可以封装成一个方法(methods)或者计算属性(computed)。

v-bind动态绑定style(数组语法)

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          baseStyle: { backgroundColor: "red" },
          baseStyle1: { fontSize: "50px" }
        }
      })
    </script>
  </body>
</html>

1.数组语法的用法

:style的数组语法和上节的类似，将想要的样式用变量的方式保存，然后绑定即可。

<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>

第一次记录自己的学习笔记，如果您发现问题，欢迎指点。

蓝带915

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
04-Vue的动态绑定属性(二)

v-bind动态绑定style(对象语法)<html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="app"> &...
复制链接

扫一扫