两种样式

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. K60用IRA通过j-link下载失败，解决方法

    K60在用飞思卡尔原厂的例程时,例程编译时没有问题,但是烧写时不成功,出现以下提示,请问该如何解决这个问题?提示1.Miss or malformed flash loader specificati ...

  2. Android ble蓝牙使用注意

    以下均为自己在Android ble开发项目中遇到的问题 1.尽量不要在BluetoothGattCallback里面的回调函数中执行读写通知操作,最多一个,因为例如在onServicesDiscov ...

  3. SQLServer 日期函数及日期转换数据类型

    一.统计语句 1.--统计当前[>当天00点以后的数据] SELECT * FROM 表 WHERE CONVERT(Nvarchar, dateandtime, 111) = CONVERT( ...

  4. SQLServer之ISO游标使用

    什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...

  5. Django的URL调度

    1.URLconf (URL configuration):(Django版本1.11.20,其它版本可能各有差异.) 在Django中Python后端与前端URL进行交互,是通过一个名为urlcon ...

  6. linux驱动简单介绍

     linux驱动简单介绍 驱动基本介绍 驱动.顾名思义就是“驱使硬件设备行动”.设备驱动与底层硬件之间打交道,按照硬件设备的具体操作方式来读写设备寄存器,最终完成一系列操作. 设备 驱动充当了应用程序 ...

  7. Perl输出带颜色行号或普通输出行

    定义好了一个可以输出带颜色行号以及行数据的函数print_with_line_num,f()是测试函数.在f()函数中,读取文件并输出读取的每一行数据,但根据参数选项决定是普通输出行还是同时输出带颜色 ...

  8. 作业2：分布式版本控制系统Git的安装与使用

    1.下载安装配置用户名和邮箱. 2. 创建工作目录并通过git init命令把这个目录变成Git可以管理的仓库. 3. 在工作目录下准备文本文件,建议下载Notepad++代替记事本. 4. 组合用g ...

  9. Spring Boot自定义Banner

    在2016年的最后一天,借用Spring Boot的Banner向各位程序猿同仁们问候一声:Happy New Year. 接下来我们就来介绍一下这个轻松愉快的自定义banner功能.实现的方式非常简 ...

  10. Divide Candies CodeForces - 1056B （数学）

    Arkady and his friends love playing checkers on an n×nn×n field. The rows and the columns of the fie ...