本篇文章給大家分享的是有關怎么在vue中使用v-bin和class屬性,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
創(chuàng)新互聯(lián)建站主要為客戶提供服務項目涵蓋了網頁視覺設計、VI標志設計、成都全網營銷、網站程序開發(fā)、HTML5響應式成都網站建設、手機網站制作設計、微商城、網站托管及成都網站維護、WEB系統(tǒng)開發(fā)、域名注冊、國內外服務器租用、視頻、平面設計、SEO優(yōu)化排名。設計、前端、后端三個建站步驟的完善服務體系。一人跟蹤測試的建站服務標準。已經為柴油發(fā)電機行業(yè)客戶提供了網站營銷推廣服務。
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網頁分割成可復用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網頁中相應的地方,所以越來越多的前端開發(fā)者使用vue。
一、屬性
屬性:
v-bind:src=""
width/height/title....
簡寫:
:src="" 推薦
效果能出來,但是會報一個404錯誤
效果可以出來,不會發(fā)404請求
window.onload=function(){ new Vue({ el:'#box', data:{ url:'/upload/otherpic62/27120.png', w:'200px', t:'這是一張美麗的圖片' }, methods:{ } }); };
二、class和style
:class="" v-bind:class=""
: v-bind:
:class="[red]" red是數據
:class="[red,b,c,d]"
文字...
:class="{red:true, blue:false}"http://這里是{ json}
文字...
文字...
data:{ json:{red:a, blue:false} }
:class="json"
官方推薦用法
文字...
style:
:
.red{ color: red; }文字...
:
注意: 復合樣式,采用駝峰命名法
文字...
:
文字...
以上就是怎么在vue中使用v-bin和class屬性,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。