两种样式

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. datatable动态列处理，重绘表格(敲黑板，划重点！！！我肝了一天半才彻底弄懂这个东西，TAT)

    datatable动态列处理,重绘表格 前言:至于动态列的绘画,我前面博客已经写过了,就是动态列的配置问题,不懂的去我博客看下,今天要写的呢,就是你已经写了一个动态列在datatable,现在你想重新 ...

  2. Linux中常用来查看进程的命令PS

    查看所有运行中的进程:ps aux | less 显示所有进程: ps -A / ps -e 显示进程的树状图:pstree

  3. WordCount项目基本功能

    一.项目源代码地址 本人Gitee项目地址:https://gitee.com/yuliu10/WordCount 二.PSP表格 psp阶段 预估耗时 (分钟) 实际耗时 (分钟) 计划 30 10 ...

  4. 深入浅出KNN算法（二） sklearn KNN实践

    姊妹篇: 深入浅出KNN算法(一) 原理介绍 上次介绍了KNN的基本原理,以及KNN的几个窍门,这次就来用sklearn实践一下KNN算法. 一.Skelarn KNN参数概述 要使用sklearnK ...

  5. C学习笔记（逗号表达式）

    (1)书写: ① int i; i=(i=*,i*); printf("%d\n",i); i=60; ② int i; i=i=*,i*; printf("%d\n&q ...

  6. java优先级队列的使用 leecode.703.数据流中的第K大元素

    //设计一个找到数据流中第K大元素的类(class). //注意是排序后的第K大元素,不是第K个不同的元素. class KthLargest { private PriorityQueue<I ...

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

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

  8. Command "python setup.py egg_info" failed with error code 1 in C:\Users\w5659\AppData\Local\Temp\pip-install-t7uomu4r\xa dmin\

    Error msg: C:\Users\w5659>pip install xadmin Collecting xadmin Using cached https://files.pythonh ...

  9. Django Rest Framework(一)

    •基于Django 先创建一个django项目,在项目中创建一些表,用来测试rest framework的各种组件 class UserInfo(models.Model): "" ...

  10. VS2019 离线安装方法详解

    本文详细介绍了 VS2019 离线安装的相关步骤,以桌面开发为主下载 C++桌面开发..NET 桌面开发相关的工作负载.MFC 可选组件及帮助查看器. 工作负载(Workload) 离线安装需要先根据 ...