两种样式

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. Android开发相关的Blog推荐——跟随大神的脚步才能成长为大神

    转载:https://blog.csdn.net/zhaokaiqiang1992/article/details/43731967 CSDN 鸿洋:http://blog.csdn.net/lmj6 ...

  2. Scala之eq,equals,==的区别

    一.简介 根据官方API的定义: final def ==(arg0: Any): Boolean The expression x == that is equivalent to if (x eq ...

  3. c# 多线程 --Mutex（互斥锁） 【转】

    互斥锁(Mutex) 互斥锁是一个互斥的同步对象,意味着同一时间有且仅有一个线程可以获取它. 互斥锁可适用于一个共享资源每次只能被一个线程访问的情况 函数: //创建一个处于未获取状态的互斥锁 Pub ...

  4. centos7新增硬盘

    centos7新增硬盘 步骤:分区---格式化---挂载(配置开机自动挂载) 1.分区 fdisk -l 查看硬盘信息确认新硬盘的名称(以/dev/sdb为例) fdisk /dev/sdb  管理硬 ...

  5. 本地部署JAVA SE环境

    一.下载安装JDK: 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-doc-downloads-2133158. ...

  6. 在xp下无人值守自动安装系统

    无人值守安装可以大大缩短安装系统的时间.我在虚拟机测试成功. 先给文件链接https://files.cnblogs.com/files/sishenzaixian/%E8%87%AA%E5%8A%A ...

  7. git stash解决代码merge出错

    最近在使用git提交代码时,遇到一个问题,就是我修改了几个文件的代码,然后又想把自己代码库里面的代码更新到最新版本,然后不出所料,代码冲突了!作为一个喜欢解决问题的程序员,怎么会被这样的问题所困住呢? ...

  8. 随心测试_软测基础_005 <测试人员工作内容>

    接上篇:清楚了_测试人员的工作职责范围,那每项 测试活动的具体工作内容有哪些呢? Q1:如何理解测试工程师的工作内容? A1:SX的观点:综合一体化 现如今互联网行业如何哪达,每一项IT职业的工作职责 ...

  9. Python----Kernel SVM

    什么是kernel Kernel的其实就是将向量feature转换与点积运算合并后的运算,如下, 概念上很简单,但是并不是所有的feature转换函数都有kernel的特性. 常见kernel 常见k ...

  10. Ubuntu本地文件上传至HDFS文件系统出现的乱码问题及解决方案

    1.问题来源及原因 用shell命令上传到HDFS中之后出现中文乱码,在shell命令窗口查看如图: 在eclipse中的文件HDFS查看工具查看如图: 原因:上传至HDFS文件系统的文本文件(这里是 ...