zoukankan      html  css  js  c++  java
  • v-bind:的基本用法

    1. v-bind:class(根据需求进行选择)

    <style>
    .box{
        background-color: #ff0;
    }
    .textColor{
        color: #000;
    }
    .textSize{
        font-size: 30px;
    }
    </style>
    
    <div id="app">
        <span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>
    </div>
    
    <script>
      new Vue({
          el: "#app",
      data:{
          isColor:true,
          isSize:true
      }
      })
    </script>
    
    方法1
    1.1
    <style>
    .box{
        background-color: #ff0;
    }
    .textColor{
        color: #000;
    }
    .textSize{
        font-size: 30px;
    }
    </style>
    <div id="app">
        <span class="box" :class="classObject">我是字</span>
    </div>
    <script>
    new Vue({
    el: "#app",
    data:{
        classObject:{
        'textColor': true,
        'textSize': true
        }
        }
    })
    </script>
    
    方法2
    1.2
    <style>
    .box{
        background-color: #ff0;
    }
    .textColor{
        color: #0f0;
    }
    .textSize{
        font-size: 30px;
    }
    </style>
    <div id="app">
        <span class="box" :class="[classA,classB]">我是字</span>
    </div>
    <script>
    new Vue({
        el: "#app",
        data:{
            classA: 'textColor',
            classB: 'textSize'
        }
    })
    </script>
    1.3
    <style>
    .box{
        background-color: #ff0;
    }
    .textColor{
        color: #0f0;
    }
    .textSize{
        font-size: 30px;
    }
    </style>
    <div id="app">
        <span class="box" :class="[isA?classA:'', classB]">我是字</span>
    </div>
    <script>
    new Vue({
        el: "#app",
        data:{
            classA: 'textColor',
            classB: 'textSize',
            isA: false
        }
    })
    </script>
    1.4

    2.v-bind:style (根据需求进行选择,驼峰式)

    <div id="app">
        <span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                activeColor: 'red',
                size: '30px',
                shadow: '5px 2px 6px #000'
            }
    })
    </script>
    2.1
    <div id="app">
        <span class="box" :style="styleObject">我是字</span>
    </div>
    <script>
    new Vue({
        el: "#app",
        data:{
            styleObject:{
            color: 'red',
            fontSize: '30px',
            textShadow: '5px 2px 6px #000'
            }
        }
    })
    </script>
    2.2
    <div id="app">
        <span class="box" :style="[styleA,styleB]">我是字</span>
    </div>
    <script>
    new Vue({
        el: "#app",
        data:{
            styleA:{
                fontSize: '30px',
                color: 'red'
            },
            styleB:{
                textShadow: '5px 2px 6px #000'
            }
        }
    })
    </script>
    
    2.3
    2.3
    <div id="app">
        <span class="box" :style="[isA?styleA:'', styleB]">我是字</span>
    </div>
    <script>
    new Vue({
        el: "#app",
        data:{
            styleA:{
                fontSize: '30px',
                color: 'red'
            },
            styleB:{
                textShadow: '5px 2px 6px #000'
            },
            isA: false
        }
    })
    </script>
    
    2.4
    2.4

    3.v-bind:src 

    <div id="app">
        <img :src="url" />
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                url: "../img/pg.png"
            }
    })
    </script>
    3.1

     4.v-bind:title

    <div id="app">
        <div :title="message">我是字</div>
    </div>    
    <script type="text/javascript">
        new Vue({
        el: "#app",
        data:{
            message:"我是吱吱"
        }
        })
    </script>
    4.1
  • 相关阅读:
    几个常见移动平台浏览器的User-Agent
    正则表达式那些事儿(三)
    正则表达式那些事儿(二)
    正则表达式那些事儿(一)
    jQuery官网plugins栏目下那些不错的插件
    UVA 11729 Commando War 突击战 【贪心】
    HDOJ 2084 数塔 【dp】
    HDOJ 1465 不容易系列之一 【错排公式 递推】
    HDOJ 2046 骨牌铺方格 【递推】
    HDOJ 2044 一只小蜜蜂... 【递推】
  • 原文地址:https://www.cnblogs.com/xueweijie/p/6856095.html
Copyright © 2011-2022 走看看