两种样式

Vue中使用样式方式有两种，一种是class样式，一种是内联样式也就是style

class样式

class样式使用的方式有5种，HTML如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>蜀云泉</title>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

    <style>

        .pink{

            color: pink

        }

        .thin{

            font-weight: 200;

        }

        .italic{

            /* 字体样式为倾斜 */

            font-style: italic;

        }

        .active{

            /* 使得中文间距变为0.5em */

            letter-spacing: 0.5em; 

            /* word-spacing: 0.5em; 使得英文间距变为0.5em */

        }

    </style>

</head>

<body>

    <!-- 这个div就是MVVM中的V，View -->

    <div id="app">

        <!-- 这个是普通的使用css样式的方法 -->

        <h1 class="pink thin italic active">大家好，我是Vae</h1>

        <!-- 使用v-bind绑定属性的方式 -->

        <h1 :class="['pink','thin']">大家好，我是Vae</h1>

        <!-- 使用v-bind和三元表达式，flag为true就使用active -->

        <h1 :class="['pink','thin',flag?'active':'']">大家好，我是Vae</h1>

        <!-- 三元表达式的简化，以对象的方式 -->

        <h1 :class="['pink','thin',{'active':flag}]">大家好，我是Vae</h1>

        <!-- 三元表达式的简化，以对象的方式 -->

        <h1 :class="classObj">大家好，我是蜀云泉</h1>

    </div>

    <script>

        // 这个vm就是MVVM中的VM，ViewModel

        var vm=new Vue({

         el: '#app',

        //  这个data就是MVVM中的M，Model

         data: {

             flag:true,

             classObj:{ pink:true,thin:true,italic:true,active:true}

         },

         methods: {

         }  

        })

    </script>

</body>

</html>

要是在Vue中使用，应该是三元表达式的简化使用的频率高

内联样式

内联样式就是写style，有三种方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>蜀云泉</title>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

</head>

<body>

    <!-- 这个div就是MVVM中的V，View -->

    <div id="app">

        <!-- 这个是普通的使用style样式的方法 -->

        <h1 :style="{color:'red','font-weight':200 }">大家好，我是Vae</h1>

        <!-- 使用v-bind绑定属性的方式 -->

        <h1 :style="[styleObj1]">大家好，我是蜀云泉</h1>

        <!-- 绑定多个样式数组 -->

        <h1 :style="[styleObj1,styleObj2]">大家好，我是许嵩</h1>

    </div>

    <script>

        // 这个vm就是MVVM中的VM，ViewModel

        var vm=new Vue({

         el: '#app',

        //  这个data就是MVVM中的M，Model

         data: {

             styleObj1:{ color:'blue','font-weight':200 },

             styleObj2:{ 'font-style': 'italic','letter-spacing':'0.5em' }

         },

         methods: {

         }  

        })

    </script>

</body>

</html>

效果图如下

防盗链接：本博客由蜀云泉发表

Vue学习笔记七：Vue中的样式的更多相关文章

  1. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  2. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  3. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  4. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  5. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  6. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  7. Vue学习笔记之Nodejs中的NPM使用

    0x00 NPM是什么 简单的说,npm就是JavaScript的包管理工具.类似Java语法中的maven,gradle,python中的pip. 0x01 NPM安装 傻瓜式的安装. 第一步:打开 ...

  8. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  9. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

随机推荐

  1. Python使用Plotly绘图工具，绘制甘特图

    今天来讲一下如何使用Python 的绘图工具Plotly来绘制甘特图的方法 甘特图大家应该了解熟悉,就是通过条形来显示项目的进度.时间安排等相关情况的. 我们今天来学习一下,如何使用ployly来绘制 ...

  2. Python3 调试技巧 —— 死循环

    说下Python3不使用gdb的自身调试 前情提要:服务器莫名卡死,用网上的方法用gdb,下载了很多组件,包括那个libpython.py,都没什么用,看不到堆栈,也试了保存core文件等等 大事找官 ...

  3. vue build错误异常的解决方法

    在生成vue项目的时候,出现如下错误 ERROR in static/js/index.d66d806fcdd72b36147b.js from UglifyJs Unexpected token: ...

  4. 各种raid对比

    级别 最少单元 特征 冗余 性能 空间利用率 综合评价 RAID0 1 分片分散存入 否 读写2倍 100% 分散存储,任何一块坏掉数据则不完整 RAID1 2 相同数据存入2个磁盘 是 写不变,读快 ...

  5. 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?

    <!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...

  6. Surging微服务的注意事项

    做个记录 1.Service的方法必须是异步方法 这个是同事发现的,非异步方法Swagger会用不了 2.仓储层不能用接口 这个是自己做的,根据同事的例子,本来好好的,想着在仓储层给加个接口,然后用接 ...

  7. 周一02.3运行python程序的两种方式

    一.运行python程序的两种方式 方法一:交互式:                     优点:输入一行代码立刻返回结果                      缺点:无法永久保存代码 方法二: ...

  8. 使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js

    前言:前端小白一枚,刚注册博客,先发个学习过程中新碰到小问题试试水吧~ 摘要:最近在学习bootstrap,偶然碰到了一个小问题,bootstrap网站也没有做过多的解释,今天分享给大家. 问题描述: ...

  9. 一键安装Cloud Torrent

    wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/cloudt.sh ...

  10. mybatis批量插入报错

    报错内容 org.springframework.jdbc.UncategorizedSQLException: ### Error updating database. Cause: java.sq ...