欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue基礎(chǔ)之v-bind屬性、class和style用法分析

 更新時(shí)間:2019年03月11日 09:24:08   作者:白楊-M  
這篇文章主要介紹了vue基礎(chǔ)之v-bind屬性、class和style用法,結(jié)合實(shí)例形式分析了vue.js中v-bind綁定及class、style樣式控制相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue基礎(chǔ)之v-bind屬性、class和style用法。分享給大家供大家參考,具體如下:

一、屬性

屬性:

v-bind:src=""
width/height/title....

簡寫:

:src=""    推薦

<img src="{{url}}" alt="">    效果能出來,但是會(huì)報(bào)一個(gè)404錯(cuò)誤
<img v-bind:src="url" alt="">    效果可以出來,不會(huì)發(fā)404請求

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          url:'https://www.baidu.com/img/bd_logo1.png',
          w:'200px',
          t:'這是一張美麗的圖片'
        },
        methods:{
        }
      });
    };
<div id="box">
    <!--<img src="{{url}}" alt="">-->
    <img :src="url" alt="" :width="w" :title="t">
  </div>

二、class和style

:class=""     v-bind:class=""
:style=""     v-bind:style=""
:class="[red]"     red是數(shù)據(jù)
:class="[red,b,c,d]"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          claOne:'red',//這里的red是樣式class類名
          claTwo:'blue'
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <!--這里的calOne,calTwo指data里的數(shù)據(jù)-->
    <strong :class="[claOne,claTwo]">文字...</strong>
  </div>
</body>
</html>

:class="{red:true, blue:false}"http://這里是{ json}

<style>
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
        }
      });
    };
  </script>
<div id="box">
    <strong :class="{red:true,blue:true}">文字...</strong>
  </div>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          a:true,
          b:false
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :class="{red:a,blue:b}">文字...</strong>
  </div>
</body>
</html>

data:{
json:{red:a, blue:false}
}

:class="json"

官方推薦用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          json:{
            red:true,
            blue:true
          }
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :class="json">文字...</strong>
  </div>
</body>
</html>

style:
:style="[c]"

.red{
      color: red;
    }
<div id="box">
    <strong :style="{color:'red'}">文字...</strong>
  </div>

:style="[c,d]"

注意: 復(fù)合樣式,采用駝峰命名法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style></style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          c:{color:'red'},//這里的red是 class .red
          b:{backgroundColor:'blue'}//注意: 復(fù)合樣式,采用駝峰命名法
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :style="[c,b]">文字...</strong>
  </div>
</body>
</html>

:style="json"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style></style>
  <script src="vue.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          a:{
            color:'red',
            backgroundColor:'gray'
          }
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :style="a">文字...</strong>
  </div>
</body>
</html>

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • vue中引用阿里字體圖標(biāo)的方法

    vue中引用阿里字體圖標(biāo)的方法

    這篇文章主要介紹了vue中引用阿里字體圖標(biāo)出現(xiàn)錯(cuò)誤問題的解決方法,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
    2018-02-02
  • VUE表達(dá)式{{}}中如何拼接字符

    VUE表達(dá)式{{}}中如何拼接字符

    這篇文章主要介紹了VUE表達(dá)式{{}}中如何拼接字符問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue中將網(wǎng)頁打印成pdf實(shí)例代碼

    vue中將網(wǎng)頁打印成pdf實(shí)例代碼

    本篇文章主要介紹了vue中將網(wǎng)頁打印成pdf實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06
  • Vue 實(shí)現(xiàn)可視化拖拽頁面編輯器

    Vue 實(shí)現(xiàn)可視化拖拽頁面編輯器

    這篇文章主要介紹了Vue 實(shí)現(xiàn)可視化拖拽頁面編輯器的方法,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2021-02-02
  • watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別及實(shí)現(xiàn)案例

    watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別及實(shí)現(xiàn)案例

    watch和computed是vue實(shí)例對象中的兩個(gè)重要屬性,watch是監(jiān)視屬性,用來監(jiān)視vue實(shí)例對象上屬性和方法的變化,computed被稱為計(jì)算屬性,可以將data對象中的屬性進(jìn)行計(jì)算得到新的屬性,這篇文章主要介紹了watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別,需要的朋友可以參考下
    2023-05-05
  • Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化

    Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化

    這篇文章主要介紹了Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • vue中v-if和v-for一起使用的弊端及解決辦法(同時(shí)使用 v-if 和 v-for不推薦)

    vue中v-if和v-for一起使用的弊端及解決辦法(同時(shí)使用 v-if 和 v-for不

    當(dāng) v-if 和 v-for 同時(shí)存在于一個(gè)元素上的時(shí)候,v-if 會(huì)首先被執(zhí)行,這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下
    2023-07-07
  • Element InputNumber計(jì)數(shù)器的使用方法

    Element InputNumber計(jì)數(shù)器的使用方法

    這篇文章主要介紹了Element InputNumber計(jì)數(shù)器的使用方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式

    vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式

    這篇文章主要介紹了vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 聊聊Vue中provide/inject的應(yīng)用詳解

    聊聊Vue中provide/inject的應(yīng)用詳解

    這篇文章主要介紹了聊聊Vue中provide/inject的應(yīng)用詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11

最新評論