資訊專欄INFORMATION COLUMN
摘要：它可以往元素的屬性中綁定數(shù)據(jù)，也可以動態(tài)地根據(jù)數(shù)據(jù)為元素綁定不同的樣式。綁定屬性最簡單的例子，我們有一張圖片，需要定義圖片的。注意樣式的寫法跟會有些許不同，橫杠分詞變成駝峰式分詞。這期就到這里，敬請期待下一期列表渲染和事件監(jiān)聽。
這期跟大家分享的，是v-bind指令。它可以往元素的屬性中綁定數(shù)據(jù)，也可以動態(tài)地根據(jù)數(shù)據(jù)為元素綁定不同的樣式。
綁定屬性最簡單的例子，我們有一張圖片，需要定義圖片的src。我們可以直接在元素的屬性里面定義：
但是在實際工作中，我們通常會遇到的情況是，圖片地址是從數(shù)據(jù)里返回的，這個時候v-bind指令就派上了用場。當然，我們可以同時綁定各種屬性：
在瀏覽器可以看到效果：
這時候你也許會說，每次都要寫一遍v-bind好麻煩。沒問題，Vue為你準備好了簡寫的方式：
綁定行內(nèi)樣式![]()
v-bind也可以用于綁定樣式，使用行內(nèi)樣式時，關(guān)鍵字是style，跟在html里面直接寫行內(nèi)樣式類似。注意樣式的寫法跟css會有些許不同，橫杠分詞變成駝峰式分詞。
當然，把樣式寫在vue的data里面會方便一些：
在瀏覽器中可以看到html中的行內(nèi)樣式：
綁定CSS樣式更常見的做法肯定是根據(jù)數(shù)據(jù)綁定不同的樣式了。這時關(guān)鍵字是class。
效果如圖：
當然，在實際工作中isActive的值一般不會像例子中這樣直接寫死，而是根據(jù)用戶的交互或者數(shù)據(jù)進行判斷。
這期就到這里，敬請期待下一期：列表渲染和事件監(jiān)聽。
寫在最后源碼地址：https://github.com/levblanc/v...
視頻攻略：小的不才，為求一贊，自制 本期視頻攻略 在此。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81277.html
摘要：在大家的鞭策和鼓勵下，這個基礎(chǔ)的系列終于完成了。關(guān)于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。 在大家的鞭策和鼓勵下，這個基礎(chǔ)API的系列終于完成了。所幸是沒有真的更到一百期才完結(jié)（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關(guān)掉專欄，但由于...
摘要：修改的值可以看到元素中增加了，原來的文字也被隱藏了當然也可以賦值為其它東西，但是最后都會轉(zhuǎn)換為布爾值來決定目標元素是否顯示。 本期跟大家分享的，是Vue里面除了v-bind和v-on之外的指令。因為都挺簡單的，所以就一次性解決了。 v-text 直接把文字綁定到html。之前我們一直使用大胡子語法往html里面綁定數(shù)據(jù)，如果數(shù)據(jù)是純字符串的話，也可以使用v-text。 當...
摘要：學(xué)習(xí)內(nèi)容，基本語法和概念，打包工具，實戰(zhàn)操作參考文獻官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實現(xiàn)手機開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實現(xiàn)界面效果框架是為了提高開發(fā) 學(xué)習(xí)內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實戰(zhàn)操作 參考文獻：官網(wǎng)： https://cn.vuejs.org...
摘要：學(xué)習(xí)內(nèi)容，基本語法和概念，打包工具，實戰(zhàn)操作參考文獻官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實現(xiàn)手機開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實現(xiàn)界面效果框架是為了提高開發(fā) 學(xué)習(xí)內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實戰(zhàn)操作 參考文獻：官網(wǎng)： https://cn.vuejs.org...
閱讀 2480·2021-09-27 13:36
閱讀 2172·2019-08-29 18:47
閱讀 2140·2019-08-29 15:21
閱讀 1404·2019-08-29 11:14
閱讀 1989·2019-08-28 18:29
閱讀 1634·2019-08-28 18:04
閱讀 581·2019-08-26 13:58
閱讀 3217·2019-08-26 12:12
