怎么在vue中使用v-bin和class屬性

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

創新互聯建站主要為客戶提供服務項目涵蓋了網頁視覺設計、VI標志設計、成都全網營銷、網站程序開發、HTML5響應式成都網站建設、手機網站制作設計、微商城、網站托管及成都網站維護、WEB系統開發、域名注冊、國內外服務器租用、視頻、平面設計、SEO優化排名。設計、前端、后端三個建站步驟的完善服務體系。一人跟蹤測試的建站服務標準。已經為柴油發電機行業客戶提供了網站營銷推廣服務。

為什么要使用Vue

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

一、屬性

屬性:

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

簡寫:

:src="" 推薦

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

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          url:'/upload/otherpic62/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是數據
: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里的數據-->
    <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屬性，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創新互聯行業資訊頻道。

名稱欄目：怎么在vue中使用v-bin和class屬性
本文URL：http://m.kartarina.com/article32/jeccpc.html

成都網站建設公司_創新互聯，為您提供靜態網站、網站策劃、面包屑導航、全網營銷推廣、、用戶體驗

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

猜你還喜歡下面的內容