zoukankan      html  css  js  c++  java
  • vue 绑定 添加class 属性 4种方法 添加style 3中方法 v-bind /:

    一、添加class
    <style>
    .red{color: skyblue;}
    .thin{font-weight: 200;}
    .italic{font-style: italic;}
    .active{letter-spacing: 0.5em}
    </style>
    1.第一种使用方式,直接传递一个数组,注意的 class需要使用  v-bind 做数据绑定
    eg:
    <h1 :class="['italic','red'">H1标签!!!</h1>
    2.在数组中使用三元表达式
    eg:
    <h1 :class="['italic','red',flag?'active':'']">H1标签!!!</h1>
    3.在数组中使用 对象来代替三元表达式,提高代码的可读性
    <h1 :class="['italic','red',{'active':flag}]">H1标签!!!</h1>
    4.在为class使用v-bind 绑定 对象的时候,对象的属性是类名,由于对象的额属性可带引号,也可以不带引号;属性的值是一个标识符
    (1).<h1 :class="{'red':true,thin:true,italic:true,active:true}">H1标签!!!</h1>
    (2).<h1 :class="classObj">H1标签!!!</h1>
    <script>
    var vm = new Vue({
    el:'#app',
    data:{
    msg:'点击事件',
    flag:false,
    classObj:{red:true,thin:true,italic:true,active:true}
    },
    methods:{

    }
    });
    </script>


    二、添加style
    1.直接在元素上通过:style的形式,书写样式对象
    <h1 :style="{color:'red','font-size':'40px'}">h1标签</h1>
    2.将样式对象定义到data中,并直接引用到:style
    <h1 :style="styleobj">h1标签</h1>
    3.在:style中通过数组,引用多个data上的样式对象
    <h1 :style="[styleobj,styleobj2]">h1标签</h1>

    <script>
    //创建Vue实例
    var vm = new Vue({
    el:'#app',
    data:{
    styleobj:{color:'red','font-weight':200},
    styleobj2:{'font-style':'italic'}
    },
    methods:{}
    })
    </script>
  • 相关阅读:
    C\C++\Java字符串拼接比较
    Visual Assist X支持VS2010高亮显示CUDA代码(Windows 7)
    相似字符串(编程之美2013初赛题2)
    linux mdadm raid阵列重建加速bitmaps文件
    Pig Grunt之简单命令及实例说明
    error: device not found解决
    Spring配置文件错误
    Java贪吃蛇游戏(坐标方法)
    java增强型for循环(三种遍历集合方式)
    酸菜鱼的简单做法
  • 原文地址:https://www.cnblogs.com/wwlong/p/11283053.html
Copyright © 2011-2022 走看看