Vue中style的用法总结如下：

v-bind:style  简写:style

1.基本用法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        .red{

            color: red;

        }

        .blue{

            background: blue;

        }

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{  

                },

                methods:{

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <strong :style="{color:'red'}">文字...</strong>

    </div>

</body>

</html>

描述：

<strong :style="{color:'red'}">文字...</strong>

其中的red是class的

结果：

2.采用数组形式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        .red{

            color: red;

        }

        .blue{

            background: blue;

        }

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    c:{color:'red'}

                },

                methods:{

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <strong :style="[c]">文字...</strong>

    </div>

</body>

</html>

描述：

采用数组的形式，设置变量c,在data中以对象的形式设置style属性

结果：

3.使用数组的形式，设置多个属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        .red{

            color: red;

        }

        .blue{

            background: blue;

        }

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    c:{color:'red'},

                    b:{backgroundColor:'blue'}

                },

                methods:{

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <strong :style="[c,b]">文字...</strong>

    </div>

</body>

</html>

描述：

和第二种一样，可以设置多个属性

结果：

4.使用设置一个变量的方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        .red{

            color: red;

        }

        .blue{

            background: blue;

        }

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    a:{

                        color:'red',

                        backgroundColor:'gray'

                    }

                },

                methods:{

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <strong :style="a">文字...</strong>

    </div>

</body>

</html>

Vue之style的用法的更多相关文章

  1. Vue中directives的用法

    关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...

  2. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  3. Vue组件的继承用法

    Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...

  4. 练习vue(class,style属性)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 深入理解VUE样式style层次分析

    刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...

  6. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Vue中mixin的用法

    在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...

  8. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

  9. Vue插件编写、用法详解（附demo）

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  10. Vue中的v-cloak用法

    v-cloak 的作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...

随机推荐

  1. 我用numpy实现了VIT，手写vision transformer, 可在树莓派上运行，在hugging face上训练模型保存参数成numpy格式，纯numpy实现

    先复制一点知乎上的内容 按照上面的流程图,一个ViT block可以分为以下几个步骤 (1) patch embedding:例如输入图片大小为224x224,将图片分为固定大小的patch,patc ...

  2. you-get的使用

    转载自: 利用Python下载:You-Get的安装及使用方法 - 宁佳兵 - 博客园   宁佳兵 所谓的光辉岁月,并不是后来闪耀的日子,而是无人问津时,对梦想的偏执. 博客园 首页 标签 GitHu ...

  3. 详解同为4800W像素的相机传感器，三星GM1和索尼IMX586区别在哪里？

    数字影像之父Bryce Bayer基于RGB模式,通过在感光元件前加上一个滤镜的方法终于实现了彩色照片.Bayer滤镜跨出了照片从黑白到彩色的一大步,但是对于挑剔的人眼来说,每个像素只有一个颜色是远远 ...

  4. Flutter ncnn 使用

    Flutter 实现手机端 App,如果想利用 AI 模型添加新颖的功能,那么 ncnn 就是一种可考虑的手机端推理模型的框架. 本文即是 Flutter 上使用 ncnn 做模型推理的实践分享.有如 ...

  5. MyBatis（lombok）

    在ida中安装lombok 在maven中导入依赖 <dependencies> <dependency> <groupId>org.projectlombok&l ...

  6. 秋叶整合包如何安装Python包

    前几天写了一篇<手把手教你在本机安装Stable Diffusion秋叶整合包>的文章,有同学运行时遇到缺少Python Module的问题,帮助他处理了一下,今天把这个经验分享给大家,希 ...

  7. 人工智能如何应对 DevOps 监控和可观测性挑战

    自 ChatGPT 横空出世之后,AIGC 已成为不可逆转的时代浪潮.在之前的文章中,我们介绍了DevOps 领域中AI的用例,需要回顾可以点击下方链接.在本篇文章中,我将简单聊聊人工智能(AI)如何 ...

  8. don't be shy to use reshape

    don't be shy to use reshape

  9. JMeter 线程组之Stepping Thread Group插件

    JMeter 线程组之Stepping Thread Group插件 测试环境   apache-jmeter-2.13 插件:https://jmeter-plugins.org/downloads ...

  10. 【go笔记】目录操作

    基本目录操作 涉及:创建目录.重命名目录.删除目录 package main import ( "fmt" "os" "time" &quo ...