Vue教程05(样式处理)

  本文我们来介绍下在Vue中针对样式处理这块的支持

Vue样式处理

一、class

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

1.基本的class使用

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


<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>Documenttitle>
    <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中的样式设置1h1>

    div>

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

            },
            methods:{

            }
        })
    script>
body>
html>

效果

Vue教程05(样式处理)_第1张图片

2.绑定数组

Vue教程05(样式处理)_第2张图片

效果

Vue教程05(样式处理)_第3张图片

3.三目运算

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

Vue教程05(样式处理)_第4张图片

效果如下:

Vue教程05(样式处理)_第5张图片

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

4.数组中使用对象

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

Vue教程05(样式处理)_第6张图片

效果

Vue教程05(样式处理)_第7张图片

5.绑定数组

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

Vue教程05(样式处理)_第8张图片

效果演示:

Vue教程05(样式处理)_第9张图片

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


<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>Documenttitle>
    <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中的样式设置1h1>
        
        <h1 v-bind:class="['red','thin']">vue中的样式设置2h1>
        <h1 :class="['red','thin']">vue中的样式设置3h1>
        
        <h1 :class="['red','thin',flag?'active':'']">vue中的样式设置4h1>
        
        <h1 :class="['red','thin',{'active':flag}]">vue中的样式设置5h1>
        
        <h1 :class="classObj">vue中的样式设置6h1>
    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引用


<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>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">
    
    <h1 :style="styleObj1">这是一个h1h1> 

   
  div>

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

html>

效果

Vue教程05(样式处理)_第10张图片

多个style引用


<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>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">
    
    <h1 :style="styleObj1">这是一个h1h1> 
    <h2 :style="[ styleObj1, styleObj2 ]">这是一个h2h2>
  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>

效果:

Vue教程05(样式处理)_第11张图片

好了,针对Vue中对样式的使用就介绍到这儿,如果不清楚的欢迎留言探讨~

你可能感兴趣的:(Vue资料)