Vue 2 | Part 4 v-bind綁定元素屬性和樣式

vboy1010 發布于2019-08-20 13:51 / 2700人閱讀

摘要：它可以往元素的屬性中綁定數據，也可以動態地根據數據為元素綁定不同的樣式。綁定屬性最簡單的例子，我們有一張圖片，需要定義圖片的。注意樣式的寫法跟會有些許不同，橫杠分詞變成駝峰式分詞。這期就到這里，敬請期待下一期列表渲染和事件監聽。

這期跟大家分享的，是v-bind指令。它可以往元素的屬性中綁定數據，也可以動態地根據數據為元素綁定不同的樣式。

綁定屬性

最簡單的例子，我們有一張圖片，需要定義圖片的src。我們可以直接在元素的屬性里面定義：

但是在實際工作中，我們通常會遇到的情況是，圖片地址是從數據里返回的，這個時候v-bind指令就派上了用場。當然，我們可以同時綁定各種屬性：

在瀏覽器可以看到效果：

這時候你也許會說，每次都要寫一遍v-bind好麻煩。沒問題，Vue為你準備好了簡寫的方式：

綁定行內樣式

v-bind也可以用于綁定樣式，使用行內樣式時，關鍵字是style，跟在html里面直接寫行內樣式類似。注意樣式的寫法跟css會有些許不同，橫杠分詞變成駝峰式分詞。

當然，把樣式寫在vue的data里面會方便一些：

在瀏覽器中可以看到html中的行內樣式：

綁定CSS樣式

更常見的做法肯定是根據數據綁定不同的樣式了。這時關鍵字是class。

效果如圖：

當然，在實際工作中isActive的值一般不會像例子中這樣直接寫死，而是根據用戶的交互或者數據進行判斷。

這期就到這里，敬請期待下一期：列表渲染和事件監聽。

寫在最后

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，為求一贊，自制本期視頻攻略在此。

云服務器 GPU云服務器 vue綁定內聯樣式 Part-2 vue實例屬性 vue.js 屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81277.html

Vue 2 | 基礎API系列文章合集

摘要：在大家的鞭策和鼓勵下，這個基礎的系列終于完成了。關于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。在大家的鞭策和鼓勵下，這個基礎API的系列終于完成了。所幸是沒有真的更到一百期才完結（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關掉專欄，但由于...

instein 2019-08-20 14:00 評論0 收藏0
Vue 2 | Part 3 常用指令合集

摘要：修改的值可以看到元素中增加了，原來的文字也被隱藏了當然也可以賦值為其它東西，但是最后都會轉換為布爾值來決定目標元素是否顯示。本期跟大家分享的，是Vue里面除了v-bind和v-on之外的指令。因為都挺簡單的，所以就一次性解決了。 v-text 直接把文字綁定到html。之前我們一直使用大胡子語法往html里面綁定數據，如果數據是純字符串的話，也可以使用v-text。當...

walterrwu 2019-08-20 13:43 評論0 收藏0
學習Vue.js-Day1

摘要：學習內容，基本語法和概念，打包工具，實戰操作參考文獻官網官方資料庫全家桶全家桶文檔概念前端框架借助可以實現手機開發前端框架是一套構造用戶界面的框架，只關于視圖層前端的主要工作室跟用戶界面打交道，中的，實現界面效果框架是為了提高開發學習內容 1，Vue基本語法和概念 2，打包工具 Webpack , Gulp3，實戰操作參考文獻：官網： https://cn.vuejs.org...

Cheriselalala 2019-08-29 16:34 評論0 收藏0
學習Vue.js-Day1

摘要：學習內容，基本語法和概念，打包工具，實戰操作參考文獻官網官方資料庫全家桶全家桶文檔概念前端框架借助可以實現手機開發前端框架是一套構造用戶界面的框架，只關于視圖層前端的主要工作室跟用戶界面打交道，中的，實現界面效果框架是為了提高開發學習內容 1，Vue基本語法和概念 2，打包工具 Webpack , Gulp3，實戰操作參考文獻：官網： https://cn.vuejs.org...

Cristic 2019-08-02 11:23 評論0 收藏0