两种样式

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. hashtable 简单介绍

    Hashtable 1 注意小写 table 2 常用方法 void                clear() boolean             contains(Object value) ...

  2. 教你在浏览器里做出EXCEL的效果

    在浏览器里做出EXCEL的效果,复制.粘贴.设置公式.双击编辑等效果,如果自己开发的话,比较麻烦,建议使用成熟的插件.这里介绍使用智表ZCELL插件,实现用户快捷操作. 首先下载插件,引入到页面中,一 ...

  3. 多线程手写Future模式

    future模式 在进行耗时操作的时候,线程直接阻塞,我们需要优化这样的代码,让他再启动一个线程,不阻塞.可以执行下面的代码. 这个时候我们就用到了未来者模式 future设计类 只有一个方法 pub ...

  4. 二、PHP基本语法 - PHP零基础快速入门

    我们日常生活中,有些人使用普通话交流,有些人使用家乡话.类比到计算机的世界里,PHP 是人与计算机沟通的语言之一. 既然是语言,那就必须遵循一定的语法规则.譬如 A 向 B 表白,A 会对 B 说:& ...

  5. Photoshop打造唯美的蓝色古装外景人物图片

    <点小图查看大图> 最终效果 1.打开原图素材大图,按Ctrl + J 把背景图层复制一层,用模糊工具把红圈区域背景模糊处理. <图1> 2.创建可选颜色调整图层,对黄色,绿色 ...

  6. HashMap源码分析(基于jdk8)

    我们知道在jdk7中HashMap的实现方式是数组+链表.而在jdk8中,实现有所变化,使用的是数组+链表+红黑树实现的. 当链表长度达到8时转化为红黑树. static final int TREE ...

  7. WMI测试器

    WMI是... 来自百度百科:WMI(Windows Management Instrumentation,Windows 管理规范)是一项核心的 Windows 管理技术:用户可以使用 WMI 管理 ...

  8. Mybatis 基本使用

    工程结构: 1.在test库创建表student(MySql数据库) 2.创建实体类Student.java package com.gdut.testMybatis.vo; public class ...

  9. java 锁 Lock接口详解

    一:java.util.concurrent.locks包下常用的类与接口(lock是jdk 1.5后新增的) (1)Lock和ReadWriteLock是两大锁的根接口,Lock代表实现类是Reen ...

  10. elk部署之前注意事项

    注意事项: 1.不能使用root用户登录,需要是用root 之外的用户登录到系统. 2.centos系统 运行内存不能小于2G,若低于2G需要修改jvm. vi  {jvm_home}/config/ ...