zoukankan      html  css  js  c++  java
  • Vue官网教程-Class与Style绑定

    就是给挂载后,里面的元素动态的添加class

    <style>
            .red{
                background-color: red;
            }
        </style>
    
        <div id="app">
    
            <!-- 绑定class = red,然后red是否显示,与isRed有关。 -->
            <div v-bind:class="{red:isRed}">Hello World</div>
    
        </div>
    
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    isRed:true
                }
            })
        </script>

    在控制台,改变isRed的值

    多个class也可以

    <style>
            .red{
                background-color: red;
            }
    
            .big{
                font-size: 30px;
            }
        </style>
    
        <div id="app">
    
            <!-- 绑定class = red,然后red是否显示,与isRed有关。 -->
            <!-- 多个class,用逗号分隔即可 -->
            <div v-bind:class="{red:isRed,big:isBig}">Hello World</div>
    
        </div>
    
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    isRed:true,
                    isBig:true
                }
            })
        </script>

    渲染之后,就是直接把这些类加到了div里面。

    可见,这种方法就是,先把所有要用到的类先写上去,然后通过取值是否为true来使用。

    可以换另一种写法,通过一个类把所有的类包裹起来,vue会自己解析。

    这种写法的好处是,不需要使用isBig,isRed这些变量来存值。直接使用类名即可。

    <style>
            .red{
                background-color: red;
            }
    
            .big{
                font-size: 30px;
            }
        </style>
    
        <div id="app">
    
            <div v-bind:class="classObject">Hello World</div>
    
        </div>
    
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    classObject:{
                        // 这里写的就是具体的类名,不是变量名了
                        red:true,
                        big:true
                    }
                }
            })
        </script>

    效果是一样的

    值变了,也能显示

    其他什么数组语法。。。感觉不太好用,知道有那么个回事就好了。

    用在组件

    不止类,其他的比如指令,用在组件标签上的,也是会渲染到组件模板的根标签

     内联样式,不是标签的属性值哦。

    而是写在标签里面的CSS,如果不想额外去声明一个类,而是直接改变某个元素的style,这样也不错。

    但是就是比较麻烦

    <div id="app">
    
            <div v-bind:style="styleObject">Hello World</div>
    
        </div>
    
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    styleObject:{
                        // 直接写css属性,以及对应的值
                        color:'red',
                        fontSize:'20px'
                    }
                }
            })
        </script>

  • 相关阅读:
    itunes Connect 未能创建 App 图标
    android在不加载图片的前提下获得图片的宽高
    Python进阶(三十五)-Fiddler命令行和HTTP断点调试
    愿Linux红帽旋风吹得更加猛烈吧!
    图解在VC里使用graphics.h画图(相似TC)
    Python3 ctypes简单使用
    setOnPageChangeListener 过时了怎么办?
    怎样用Google APIs和Google的应用系统进行集成(2)----Google APIs的全部的RESTFul服务一览
    模板维护-模板解析
    android手机安全性測试手段
  • 原文地址:https://www.cnblogs.com/weizhibin1996/p/9535168.html
Copyright © 2011-2022 走看看