怎么在vue中使用v-bin和class屬性-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關怎么在vue中使用v-bin和class屬性，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,龍城企業(yè)網(wǎng)站建設,龍城品牌網(wǎng)站建設,網(wǎng)站定制,龍城網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,龍城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應的地方，所以越來越多的前端開發(fā)者使用vue。

一、屬性

屬性:

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

簡寫:

:src="" 推薦

<img src="{{url}}" alt=""> 效果能出來，但是會報一個404錯誤
<img v-bind:src="url" alt=""> 效果可以出來，不會發(fā)404請求

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          url:'/file/tupian/20230213/27120.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=""
:     v-bind:
: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}"//這里是{ 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:
:

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

注意: 復合樣式，采用駝峰命名法

<!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'}//注意: 復合樣式，采用駝峰命名法
        },
        methods:{
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <strong :>文字...</strong>
  </div>
</body>
</html>

<!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 :>文字...</strong>
  </div>
</body>
</html>

以上就是怎么在vue中使用v-bin和class屬性，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標題：怎么在vue中使用v-bin和class屬性-創(chuàng)新互聯(lián)
文章轉載：http://www.rwnh.cn/article42/cepsec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、企業(yè)建站、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站維護、品牌網(wǎng)站設計

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

怎么在vue中使用v-bin和class屬性-創(chuàng)新互聯(lián)