zoukankan      html  css  js  c++  java
  • [vue]v-bind: sytle/class-bind&属性值绑定

    v-bind

    - style绑定
    - class绑定
    - 属性值绑定
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind:</title>
        <style>
            .x {background: blue}
            .y {font-size: 30px}
            .z {color: pink}
        </style>
    </head>
    <body>
    <div id="app">
        <h1>bind: class</h1>
        <div class="x" :class="[class1,class2,{z:true}]">maomao</div>
        <h1>bind: style</h1>
        <p :style="[style1,style2,{fontSize:'30px'}]">have a test p</p>
    
        <p style="background-color:lavenderblush;">hello world</p>
        <p :style="[style0,]">hello world</p>
    
        <h2>属性值: 链接/图片</h2>
        <a :href="baiduUrl">baidu.com</a>
        <img :src="imageUrl" alt="">
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: false,
    
                //属性绑定
                baiduUrl: 'https://www.baidu.com',
                imageUrl: 'http://t.cn/R3GPvKW',
    
                //bind-style
                style0: {color: 'lavender',},
                style1: {background: 'pink',},
                style2: {color: 'white',},
    
                // bind-class
                class1: 'x',
                class2: 'y',
            }
        })
    </script>
    </body>
    </html>
    
  • 相关阅读:
    融云使用
    cocoaPods使用
    电脑硬件
    拖图UI和纯代码UI
    7.2内存管理-ARC
    7内存管理-MRC
    数据刷新
    5.1音频播放
    2.6核心动画
    Git常用操作
  • 原文地址:https://www.cnblogs.com/iiiiiher/p/9025764.html
Copyright © 2011-2022 走看看