zoukankan      html  css  js  c++  java
  • Vue 系列之 样式相关

    Class 与 Style 绑定

    动态修改元素样式

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./vue.js"></script>
        <style type="text/css">
            .normal {
                color: palegreen
            }
    
            .error {
                color: red
            }
        </style>
    </head>
    
    <body>
        <div id="root">
            <div class="normal" v-bind:class="{error: changed}" @click="handleClick">{{message}}</div>
        </div>
    
        <script>
            new Vue({
                el: "#root",
                data: {
                    changed: false,
                    message: "hello world"
                },
                methods: {
                    handleClick: function () {
                        this.changed = !this.changed
                    }
                }
            })
        </script>
    </body>
    

    上述代码定义了两种样式:normalerror,通过判断 changed 值是否为 true 来决定是否使用 error 样式

    为一个元素绑定多种样式

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./vue.js"></script>
        <style type="text/css">
            .normal {
                color: palegreen
            }
            .fs{
                font-size: 24px
            }
        </style>
    </head>
    
    <body>
        <div id="root">
            <div v-bind:class="styles">{{message}}</div>
        </div>
    
        <script>
            new Vue({
                el: "#root",
                data: {
                    changed: false,
                    message: "hello world",
                    styles:["normal","fs"]
                }
            })
        </script>
    </body>
    

    v-bind:class 支持对多种样式进行增加或异常,可参考动态修改样式来解决这个问题。

    应用在组件上

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./vue.js"></script>
        <style type="text/css">
            .normal {
                color: palegreen
            }
            .fs {
                font-size: 24px
            }
        </style>
    </head>
    
    <body>
        <div id="root">
            <my-component v-bind:class="styles" :msg="message"></my-component>
        </div>
    
        <script>
    
            Vue.component("my-component", {
                props: ["msg"],
                template: "<p>{{msg}}</p>"
            })
    
            new Vue({
                el: "#root",
                data: {
                    message: "hello world",
                    styles: ["normal", "fs"]
                }
            })
        </script>
    </body>
    

    绑定内联样式

    v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./vue.js"></script>
        <style type="text/css">
            .normal {
                color: palegreen
            }
    
            .error {
                color: red
            }
    
            .fs {
                font-size: 24px
            }
        </style>
    </head>
    
    <body>
        <div id="root">
            <div v-bind:style="styleObject">{{message}}</div>
        </div>
    
        <script>
            new Vue({
                el: "#root",
                data: {
                    message:'hello world',
                    styleObject: {
                        color: 'blue',
                        fontSize: '13px'
                    }
                }
            })
        </script>
    </body>
    

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

    <div v-bind:style="[baseStyles, overridingStyles]"></div>
    

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

    从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    
  • 相关阅读:
    pandas
    高性能的异步爬虫
    组件推荐Forloop.HtmlHelpers 用来实现MVC的js加载顺序
    MVC 表单防伪,自定义提示(AntiForgery.Validate)
    Dapper 多表(三表以上)查询小技巧
    layui记录
    java websocket中的ping-pong 机制
    图像读取Exif小知识,图像扶正,还原拍摄时的角度
    关于人脸识别引擎FaceRecognitionDotNet的实例
    .NET的关于人脸识别引擎分享(C#)
  • 原文地址:https://www.cnblogs.com/hippieZhou/p/9490902.html
Copyright © 2011-2022 走看看