Vue学习之样式处理[通俗易懂]

Vue学习之样式处理[通俗易懂]Vue学习之样式处理

大家好,又见面了,我是你们的朋友全栈君。

Vue样式处理

一、class

我们首先来看下class属性的使用。

1.基本的class使用

我们先来看下非vue情况的class的使用,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        .red {
            color: red;
        }

        .thin {
             font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 class="red thin">vue中的样式设置1</h1>

    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{

            },
            methods:{

            }
        })
    </script>
</body>
</html>

效果

在这里插入图片描述

2.绑定数组

在这里插入图片描述

效果

在这里插入图片描述

3.三目运算

在绑定的数组中我们还可以通过三目运算来实现简单的逻辑,如下

在这里插入图片描述

效果如下:

在这里插入图片描述

通过效果也可以看出来随着flag的改变,效果也不一样咯~

4.数组中使用对象

上面例子中的三目运算符我们可以替换为对象,效果是一样的。

在这里插入图片描述

效果

在这里插入图片描述

5.绑定数组

上面都是将数据和view写在一块了,我们也可以将数据直接写在vm中,如下:

在这里插入图片描述

效果演示:

在这里插入图片描述

通过演示也可以看到,通过绑定对象也是可以的。完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        .red {
            color: red;
        }

        .thin {
             font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--基本使用-->
        <h1 class="red thin">vue中的样式设置1</h1>
        <!--通过v-bind 绑定数组 v-bind 可简写为 ':'-->
        <h1 v-bind:class="['red','thin']">vue中的样式设置2</h1>
        <h1 :class="['red','thin']">vue中的样式设置3</h1>
        <!--绑定的数组中添加 三目逻辑-->
        <h1 :class="['red','thin',flag?'active':'']">vue中的样式设置4</h1>
        <!--绑定的数组使用对象-->
        <h1 :class="['red','thin',{'active':flag}]">vue中的样式设置5</h1>
        <!--绑定一个vm中的对象-->
        <h1 :class="classObj">vue中的样式设置6</h1>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:true,
                classObj:{red:true,thin:true,italic:false,active:false}
            },
            methods:{

            }
        })
    </script>
</body>
</html>

二、style

我们除了可以通过使用class来引用样式外,我们还可以通过style来直接指定样式,Vue也支持此操作,具体如下:

单个style引用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 对象就是无序键值对的集合 -->
    <h1 :style="styleObj1">这是一个h1</h1> 

   
  </div>

  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 }
       
      },
      methods: {}
    });
  </script>
</body>

</html>

效果

在这里插入图片描述

多个style引用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 对象就是无序键值对的集合 -->
    <h1 :style="styleObj1">这是一个h1</h1> 
    <h2 :style="[ styleObj1, styleObj2 ]">这是一个h2</h2>
  </div>

  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>
</body>

</html>

效果:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106501.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • StoredProcedure “存储过程名” 的TextHeader 中存在语法错误

    StoredProcedure “存储过程名” 的TextHeader 中存在语法错误修改存储过程的时候出现StoredProcedure“存储过程名”的TextHeader中存在语法错误出现这样的问题的解决方法(本人修改已成功)在创建存储过程的时候加了注释,把注释删掉就没有问题了(或者把注释放到其他地方)错误代码如下:CREATEPROCEDURE[dbo].[tableToTxtExport]@dbTabNamenvarchar(4000),@dbBoo…

  • virsh强制关机_db2常用命令

    virsh强制关机_db2常用命令virshlist#在线VMvirshlist–all#所有VMvirshstart#开机virshshutdown#软关机virshdes…

  • Remove Duplicates from Sorted Array — LeetCode

    Remove Duplicates from Sorted Array — LeetCode原题链接: http://oj.leetcode.com/problems/remove-duplicates-from-sorted-array/ 这道题跟RemoveElement类似,也是考察数组的基本操作,属于面试中比较简单的题目。做法是维护两个指针,一个保留当前有效元素的长度,一个从前往后扫,然后跳过那些重复的元素。因为数组是有序的,所以重复元素一定相邻,不需要额外记录。时间复

    2022年10月31日
  • 用python编写猴子吃桃问题_人工智能猴子摘香蕉

    用python编写猴子吃桃问题_人工智能猴子摘香蕉一个房间里,天花板上挂有一串香蕉,有一只猴子可在房间里任意活动(到处走动,推移箱子,攀登箱子等)。设房间里还有一只可被猴子移动的箱子,且猴子登上箱子时才能摘到香蕉,问猴子在某一状态下(设猴子位置为A,香蕉位置在B,箱子位置为C),如何行动可摘取到香蕉。此问题的前提是猴子只有站在箱子上才能拿到香蕉,因此,需要首先让猴子找到箱子,再找到香蕉,并将箱子搬到香蕉下面。2.1使用语义网络实现猴子摘香蕉的知识表示2.2用java实现猴子摘香蕉Monkey类:12345678910111213141516171

  • Enterprise Library简介

    Enterprise Library简介EnterpriseLibraryfor.NetFramework3.5–EntLibv4.1是patterns&amp;practices小组为.NETFramework3.5开发一套企业库,目前最新版本为v4.1,共包括9个ApplicationBlock,包括数据访问(DataAccessApplicationBlock)、异常管理(Exception…

    2022年10月20日
  • [Python嗯~机器学习]—L1正则化和L2正则化

    正则化解决过拟合问题正则化(Regularization)是机器学习中一种常用的技术,其主要目的是控制模型复杂度,减小过拟合。最基本的正则化方法是在原目标(代价)函数中添加惩罚项,对复杂度高的模型进行“惩罚”。数学表达式:式中  、 为训练样本和相应标签,  为权重系数向量;  为目标函数,  即为惩罚项,可理解为模型“规模”的某种度量;参数 控制控制正则化强弱。不同的  函数对权重…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号