「項(xiàng)目實(shí)戰(zhàn)」從終端到瀏覽器：實(shí)現(xiàn) ANSI 字體在前端頁(yè)面的彩色展示

言

在學(xué)習(xí)和工作中，我們經(jīng)常需要使用日志來(lái)記錄程序的運(yùn)行狀態(tài)和調(diào)試信息。而為了更好地區(qū)分不同的日志等級(jí)，我們可以使用不同的顏色來(lái)呈現(xiàn)，使其更加醒目和易于閱讀。

在下圖運(yùn)行結(jié)果中，我們使用了 colorlog 庫(kù)來(lái)實(shí)現(xiàn)彩色日志輸出。通過(guò)定義不同日志等級(jí)對(duì)應(yīng)的顏色，我們可以在控制臺(tái)中以彩色的方式顯示日志信息。例如，DEBUG 級(jí)別的日志使用白色，INFO 級(jí)別的日志使用綠色，WARNING 級(jí)別的日志使用黃色，ERROR 級(jí)別的日志使用紅色，CRITICAL 級(jí)別的日志使用藍(lán)色。

但是在查看日志文件時(shí)，我們會(huì)發(fā)現(xiàn)日志信息是系統(tǒng)默認(rèn)的字體顏色，并且前后多了一些特殊符號(hào)，例如 [32m 等。這是因?yàn)樵诳刂婆_(tái)中使用的是 ANSI 轉(zhuǎn)義序列來(lái)實(shí)現(xiàn)彩色文本效果，而這些特殊符號(hào)是 ANSI 轉(zhuǎn)義序列的一部分。如下圖所示：

現(xiàn)在有一個(gè)需求，在前端頁(yè)面直接查看日志內(nèi)容并還原彩色文本效果，因此，我們將進(jìn)行以下內(nèi)容講解：

什么是 ANSI 轉(zhuǎn)義序列？
如何在前端頁(yè)面直接查看日志內(nèi)容？
如何在前端頁(yè)面還原彩色文本效果？

本文代碼點(diǎn)擊此處跳轉(zhuǎn)，往期系列文章請(qǐng)?jiān)L問(wèn)博主的項(xiàng)目實(shí)戰(zhàn)專欄，博文中的所有代碼全部收集在博主的 GitHub 倉(cāng)庫(kù)中；

ANSI 轉(zhuǎn)義序列

ANSI 轉(zhuǎn)義序列是美國(guó)國(guó)家標(biāo)準(zhǔn)化組織（American National Standards Institute，ANSI）制定的標(biāo)準(zhǔn)，是一種用于控制文本終端顯示的特殊字符序列。它們以 3[ 開(kāi)頭，以字母和數(shù)字組合的形式表示不同的控制功能。

ANSI 轉(zhuǎn)義序列可以用于控制文本的顏色、背景色、文本樣式（如粗體、斜體等）、光標(biāo)位置、清屏等操作。通過(guò)在輸出文本中插入適當(dāng)?shù)?ANSI 轉(zhuǎn)義序列，可以實(shí)現(xiàn)豐富的終端顯示效果。

以下是一些常用的 ANSI 轉(zhuǎn)義序列示例：

3[0m：重置所有屬性，恢復(fù)默認(rèn)設(shè)置；
3[31m：設(shè)置文本顏色為紅色；
3[42m：設(shè)置背景顏色為綠色；
3[1m：設(shè)置文本為粗體；
3[4m：設(shè)置文本為下劃線；
3[2J：清屏；

需要注意的是，ANSI 轉(zhuǎn)義序列在不同的終端和操作系統(tǒng)上的支持程度可能會(huì)有所不同。在某些終端中，可能無(wú)法正確解釋和顯示 ANSI 轉(zhuǎn)義序列。

我們以 3[31m 和 3[42m 為例，輸出一個(gè)綠底紅字的句子 Hello World! --sidiot.，代碼如下所示：

log.debug("3[42m3[31mHello World! --sidiot.3[0m3[0m")

運(yùn)行結(jié)果：

前端頁(yè)面直接查看日志內(nèi)容

這里的話，我們使用 Python 的 http.server 模塊來(lái)啟動(dòng)一個(gè)簡(jiǎn)單的 HTTP 服務(wù)器。

比較快捷的方式就是在日志文件夾中打開(kāi)終端，輸入 python -m http.server 8888 即可，運(yùn)行結(jié)果如下所示：

不過(guò)這種方式相對(duì)來(lái)說(shuō)還是不太安全的，因此我們可以通過(guò)設(shè)置白名單的方式，來(lái)規(guī)避一些潛在的安全隱患，代碼如下所示：

import http.server
import socketserver

class HTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def check_client_address(self):
        # 設(shè)置白名單，只允許特定的IP地址或主機(jī)訪問(wèn)
        whitelist = ['127.0.0.1', 'localhost']

        client_address = self.client_address[0]
        if client_address not in whitelist:
            self.send_response(403)
            self.end_headers()
            self.wfile.write(b'Forbidden. Please contact sidiot.')
            return False

        return True

    def do_GET(self):
        if not self.check_client_address():
            return
        
        super().do_GET()

with socketserver.TCPServer(('0.0.0.0', 8888), HTTPRequestHandler) as httpd:
    httpd.serve_forever()

目前本機(jī)的 IP 為 192.168.124.23，當(dāng)我們以 127.0.0.1 來(lái)訪問(wèn) 8888 服務(wù)端口時(shí)，訪問(wèn)是成功的，但是當(dāng)我們用 192.168.124.23 來(lái)訪問(wèn)服務(wù)端口時(shí)，訪問(wèn)是失敗的。

運(yùn)行結(jié)果：

現(xiàn)在我們點(diǎn)擊文件，它會(huì)直接通過(guò)瀏覽器直接下載，但是我們需要的是在網(wǎng)頁(yè)上能夠直接閱覽文件中的內(nèi)容，因此我們可以從 do_GET() 下手。

我們可以設(shè)計(jì)一個(gè)根據(jù)傳入的文件名參數(shù)，讀取本地文件并作為響應(yīng)結(jié)果進(jìn)行返回的方法，然后根據(jù)一定的規(guī)則進(jìn)行觸發(fā)，代碼如下所示：

def read_file(self):
    try:
        self.send_response(200)
        self.send_header("Content-Type", "text/plain; charset=utf-8")
        self.end_headers()
        self.wfile.write(open(self.path[6:], 'rb').read())

    except FileNotFoundError:
        self.send_response(404)
        self.end_headers()
        self.wfile.write(b'File not found!')

def do_GET(self):
    if self.check_client_address():
        if self.path.startswith("/?log="):
            self.read_file()
        else:
            super().do_GET()

上述代碼通過(guò)檢查請(qǐng)求的資源路徑來(lái)處理 GET 請(qǐng)求。如果請(qǐng)求的資源路徑前綴是 /?log=，且是當(dāng)前目錄下存在的日志文件，它會(huì)讀取文件并將其內(nèi)容作為響應(yīng)發(fā)送。否則，它會(huì)使用基類的默認(rèn)行為處理普通的 GET 請(qǐng)求。

運(yùn)行結(jié)果：

至此，我們已經(jīng)實(shí)現(xiàn)了前端頁(yè)面直接查看日志內(nèi)容的功能。

前端頁(yè)面還原彩色文本效果

原理分析

當(dāng)我們想要在前端頁(yè)面展示 ANSI 字體的彩色效果時(shí)，我們只需要簡(jiǎn)單地將 ANSI 轉(zhuǎn)義序列轉(zhuǎn)換成相應(yīng)的 HTML 代碼就可以實(shí)現(xiàn)了。這個(gè)轉(zhuǎn)換過(guò)程實(shí)際上可以通過(guò)編寫一個(gè) Python 函數(shù)來(lái)實(shí)現(xiàn)，該函數(shù)可以接受包含 ANSI 控制碼的字符串作為輸入，并將其轉(zhuǎn)換為帶有相應(yīng)樣式的 HTML 代碼輸出，代碼如下所示：

def convert_ansi_to_html(ansi_text):
    ansi_to_html = {
        '\x1b[31m': '<span style="color: red;">',
        '\x1b[42m': '<span style="background-color: green;">',
        ...,
    }
    html_text = re.sub(r'\x1b[[0-9;]*m', lambda match: ansi_to_html.get(match.group(0), ''), ansi_text)

    return html_text


if __name__ == '__main__':
    ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
    print(ansi)
    html = convert_ansi_to_html(ansi)
    print(f"convert content: {html}")

需要注意的是，在 ANSI 轉(zhuǎn)義序列中，\x1b 和 3 都代表ASCII 碼中的 Escape 字符，用于開(kāi)始一個(gè)轉(zhuǎn)義序列。

運(yùn)行結(jié)果：

使用 ansiconv 轉(zhuǎn)換

接下來(lái)，我們借助已有的庫(kù)函數(shù) ansiconv 進(jìn)行 ANSI 的轉(zhuǎn)換。

通過(guò) pip 進(jìn)行安裝：

pip install ansiconv

根據(jù) ansiconv 的官方文檔使用其中的三個(gè)方法 to_plain()，to_html() 和 base_css() 來(lái)實(shí)現(xiàn)在前端頁(yè)面展示 ANSI 字體的彩色效果，代碼如下所示：

import ansiconv

ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
print(f"Ansi: {ansi}")
plain = ansiconv.to_plain(ansi)
html = ansiconv.to_html(ansi)
print(f"Convert Plain: {plain}")
print(f"Convert HTML: {html}")

在 base_css() 中會(huì)有相關(guān)的 CSS 映射表，如下所示：

css_rule('.ansi31', color="#FF0000"),
css_rule('.ansi42', background_color="#00FF00"),

運(yùn)行結(jié)果：

研究 ansiconv 源碼

我們將通過(guò)研究 ansiconv 的源碼，以便深入了解它是如何將 ANSI 轉(zhuǎn)換成純文本或 HTML 代碼的工作原理。

to_plain() 的源碼如下所示：

上述代碼使用正則表達(dá)式匹配字符串中的 ANSI 轉(zhuǎn)義序列，并將其替換為空字符串，從而得到不包含轉(zhuǎn)義序列的純文本。

正則表達(dá)式的含義如下：

\x1B：匹配 ESCAPE 字符；
\[：匹配左方括號(hào)；
[0-9;]*：匹配零個(gè)或多個(gè)數(shù)字或分號(hào)；
[ABCDEFGHJKSTfmnsulh]：匹配 ANSI 轉(zhuǎn)義序列中的控制字符；

我們通過(guò) re.findall() 方法來(lái)獲取所有匹配的結(jié)果，這樣夠清晰地捕獲所有符合條件的匹配項(xiàng)，從而更好地理解 ansiconv 是如何進(jìn)行 ANSI 到純文本的轉(zhuǎn)換，代碼如下所示：

ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
print(re.findall(r'\x1B[[0-9;]*[ABCDEFGHJKSTfmnsulh]', ansi))

運(yùn)行結(jié)果：

to_html() 的源碼如下所示：

上述代碼將 ANSI 字符串分割成塊，并對(duì)每個(gè)塊調(diào)用 _block_to_html() 函數(shù)進(jìn)行解析和轉(zhuǎn)換，同時(shí)還處理了 ANSI 命令 "A"，模擬向上移動(dòng)光標(biāo)的行為。如果 replace_newline 為 True，則 HTML 字符串中的換行符 \n 將替換為 <br />\n 以保留 HTML 輸出中的換行符。

其中 _block_to_html() 的源碼如下所示：

上述代碼使用正則表達(dá)式匹配 ANSI 代碼，并根據(jù)匹配結(jié)果生成對(duì)應(yīng)的 HTML 代碼。

正則表達(dá)式的含義：

^：表示匹配字符串的開(kāi)頭。
\[：匹配左方括號(hào) [。
(?P<code>\d+(?:;\d+)*)?：這是一個(gè)命名捕獲組，用于匹配 ANSI 代碼中的數(shù)字部分。它由以下組成： \d+：匹配一個(gè)或多個(gè)數(shù)字。 (?:;\d+)*：這是一個(gè)非捕獲組，用于匹配分號(hào) ; 和一個(gè)或多個(gè)數(shù)字的重復(fù)出現(xiàn)。(?: ... ) 表示非捕獲組，* 表示重復(fù)零次或多次。
(?P<command>[Am])：這是另一個(gè)命名捕獲組，用于匹配 ANSI 代碼中的命令部分。它由以下組成： [Am]：匹配字符 A 或 m。

我們可以通過(guò)運(yùn)行源碼里的部分代碼來(lái)幫助理解，代碼如下所示：

text = ("\x1B[0;32;45msidiot\n"
        "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m")
print(text)
blocks = text.split('\x1B')
print(blocks)
for block in blocks:
    match = re.match(r'^[(?P<code>\d+(?:;\d+)*)?(?P<command>[Am])', block)
    if match is not None:
        print("\nmatch:", match, ", code:", match.group('code'), ", command:", match.group('command'))

運(yùn)行結(jié)果：

實(shí)際應(yīng)用

通過(guò)深入理解 ANSI 轉(zhuǎn)換思路和 ansiconv 源碼，我們可以為之前的 http.server 服務(wù)帶來(lái)全新的優(yōu)化。

首先，將原先的 read_file() 方法進(jìn)行優(yōu)化，代碼如下所示：

def read_file(self, content_type, file_io):
    try:
        self.send_response(200)
        self.send_header("Content-Type", f"{content_type}; charset=utf-8")
        self.end_headers()
        self.wfile.write(file_io)

    except FileNotFoundError:
        self.send_response(404)
        self.send_header("Content-Type", "text/plain; charset=utf-8")
        self.end_headers()
        self.wfile.write(b'File not found!')

上述代碼通過(guò)接收 content_type 和 file_io 兩個(gè)參數(shù)，實(shí)現(xiàn)將自定義內(nèi)容作為響應(yīng)返回給客戶端。

然后修改請(qǐng)求路徑，使其能夠返回純文本和 HTML 兩種不同類型的內(nèi)容，代碼如下所示：

def do_GET(self):
    if self.check_client_address():
        if self.path.startswith("/?plain="):
            file = open(self.path[8:], 'rb').read()
            plain = ansiconv.to_plain(file.decode('UTF-8'))
            self.read_file("text/plain", plain.encode())
        elif self.path.startswith("/?html="):
            file = open(self.path[7:], 'rb').read()
            conv = ansiconv.to_html(file.decode('UTF-8'))
            css = ansiconv.base_css()
            html = """
            <html>
              <head><style>{0}</style></head>
              <body>
                <pre class="ansi_fore ansi_back">{1}</pre>
              </body>
            </html>
            """.format(css, conv)
            print(html)
            self.read_file("text/html", html.encode())
        else:
            super().do_GET()

這里要注意的是，需要設(shè)置 CSS 樣式，不然 class 類是無(wú)法進(jìn)行渲染的。

純文本運(yùn)行結(jié)果：

HTML 運(yùn)行結(jié)果：

后記

在本文中，我們探討了如何實(shí)現(xiàn)將 ANSI 字體在前端頁(yè)面進(jìn)行彩色展示的方法。在前端頁(yè)面中直接顯示 ANSI 轉(zhuǎn)義序列是不起作用的，因?yàn)闉g覽器不會(huì)解析和處理這些轉(zhuǎn)義序列。

為了在前端頁(yè)面實(shí)現(xiàn)彩色展示，我們介紹了一種方法，即將 ANSI 轉(zhuǎn)義序列轉(zhuǎn)換為對(duì)應(yīng)的 HTML 代碼。通過(guò)解析 ANSI 轉(zhuǎn)義序列并將其轉(zhuǎn)換為適當(dāng)?shù)?HTML 標(biāo)簽和樣式，我們可以在前端頁(yè)面上還原彩色文本的效果。

在本文中，我們使用了 Python 中的 ansiconv 庫(kù)來(lái)實(shí)現(xiàn) ANSI 轉(zhuǎn)換。該庫(kù)提供了 to_plain 和 to_html 兩個(gè)方法，分別用于將 ANSI 轉(zhuǎn)義序列轉(zhuǎn)換為純文本和 HTML 代碼。我們還展示了如何使用這些方法來(lái)轉(zhuǎn)換 ANSI 字符串，并在前端頁(yè)面上顯示轉(zhuǎn)換后的結(jié)果。

通過(guò)本文的介紹，讀者可以了解到如何在前端頁(yè)面實(shí)現(xiàn)彩色文本的展示，從而提升用戶體驗(yàn)和可讀性。無(wú)論是在日志查看器、終端模擬器還是其他需要展示彩色文本的應(yīng)用中，這種技術(shù)都能發(fā)揮重要作用。

以上就是 從終端到瀏覽器：實(shí)現(xiàn) ANSI 字體在前端頁(yè)面的彩色展示 的所有內(nèi)容了，希望本篇博文對(duì)大家有所幫助！歡迎大家持續(xù)關(guān)注我的博客，一起分享學(xué)習(xí)和成長(zhǎng)的樂(lè)趣！?

作者：sidiot
鏈接：https://juejin.cn/post/7381820436274184202

于class和style我們并不陌生，這個(gè)在學(xué)習(xí)css的時(shí)候就是家常便飯了，操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個(gè)常見(jiàn)需求。因?yàn)樗鼈兌际菍傩裕晕覀兛梢杂?v-bind 處理它們，只需要通過(guò)表達(dá)式計(jì)算出字符串結(jié)果即可。不過(guò)，字符串拼接麻煩且易錯(cuò)。因此，在將 v-bind 用于 class 和 style 時(shí)，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組，所以本章將帶你了解vue中如何綁定class和style。

7.1 style綁定

在Vue中，我們可以將DOM元素通過(guò)Vue的綁定機(jī)制，實(shí)現(xiàn)我們想要的樣式。接下來(lái)看style如何實(shí)現(xiàn)綁定。

7.1.1 直接添加行內(nèi)樣式

我們先來(lái)看個(gè)簡(jiǎn)單基礎(chǔ)的動(dòng)畫案例，大家看案例代碼：

例7-1 Demo0701.html

<body>
<div id="app">
<h1 style="color:red">原生態(tài)的style樣式</h1>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
});
</script>
</html>

程序的運(yùn)行結(jié)果如下：

圖 7- 1 直接在元素中加入style原生態(tài)樣式

通過(guò)例7-1中，我們可以像往常一樣直接在元素上添加行內(nèi)樣式。

7.1.2 屬性綁定

在Vue中有屬性綁定，我們也可以通過(guò)屬性綁定直接加行內(nèi)樣式，如下代碼所示：

<h1 style="color:red">原生態(tài)的style樣式</h1>

<h1 :style="'color:red;font-size:60px;'">屬性綁定添加的style樣式</h1>

</div>

程序的運(yùn)行結(jié)果如下：

圖 7- 2 通過(guò)屬性綁定添加樣式

通過(guò)以上示例代碼，我們發(fā)現(xiàn)通過(guò)屬性綁定和直接添加非常像，但是大家認(rèn)真觀察，屬性綁定必須加雙重引號(hào)（雙中加單，單中加雙），這是因?yàn)椋绻粚?duì)樣式規(guī)則加引號(hào)，則默認(rèn)會(huì)去Vue實(shí)例中尋找對(duì)應(yīng)的數(shù)據(jù)，但是這些并不是Vue實(shí)例中的數(shù)據(jù)而是我們自己頂?shù)囊?guī)則，所以必須加引號(hào)。

7.1.3 對(duì)象綁定

剛才使用屬性綁定的是一個(gè)普通的文本，一般在Vue中，屬性綁定的是data中的數(shù)據(jù)，我們來(lái)看如下代碼：

<body>

<h1 style="color:red">原生態(tài)的style樣式</h1>

<h1 :style="'color:red;font-size:60px;background-color:pink;'">屬性綁定添加的style樣式</h1>

<h1 :style="styleObj"> 通過(guò)vue的數(shù)據(jù)對(duì)象添加樣式</h1>

</div>

</body>

let vm = new Vue({

el: '#app',

data: {

styleObj: "color:green;font-size:80px;background-color:red;",

}

});

</script>

屬性綁定的是data中一個(gè)數(shù)據(jù)，該數(shù)據(jù)寫的是樣式規(guī)則。

也可以綁定一個(gè)對(duì)象，在該對(duì)象中使用js語(yǔ)法控制樣式規(guī)則：

示例如下：

<body>

<h1 style="color:red">原生態(tài)的style樣式</h1>

<h1 :style="'color:red;font-size:60px;background-color:pink;'">屬性綁定添加的style樣式</h1>

<h1 :style="styleObj"> 通過(guò)vue的數(shù)據(jù)對(duì)象添加樣式</h1>

<h1 :style="testObj"> 通過(guò)vue的數(shù)據(jù)對(duì)象添加樣式</h1>

</div>

</body>

let vm = new Vue({

el: '#app',

data: {

styleObj: "color:green;font-size:80px;background-color:red;",

testObj: {

color: 'blue',//注意是對(duì)象，對(duì)象的各個(gè)屬性之間使用逗號(hào)隔開(kāi)，而不是分號(hào)

fontSize: '90px',

backgroundColor: 'pink'

}

});

</script>

注意：在該示例代碼中，我們使用的是一個(gè)object類型的數(shù)據(jù)來(lái)定義樣式，在這必須使用JavaScript操控style的語(yǔ)法規(guī)則來(lái)定義對(duì)象的各個(gè)屬性，而且屬性值必須是字符串，使用引號(hào)括起來(lái)。

7.1.4 數(shù)組綁定

在正常的樣式中，一個(gè)DOM元素可以同時(shí)應(yīng)用多個(gè)樣式規(guī)則，在Vue中，也可以綁定到一個(gè)數(shù)組對(duì)像，同時(shí)應(yīng)用多個(gè)樣式規(guī)則，示例代碼如下：

<body>

<h1 style="color:red">原生態(tài)的style樣式</h1>

<h1 :style="'color:red;font-size:60px;background-color:pink;'">屬性綁定添加的style樣式</h1>

<h1 :style="styleObj"> 通過(guò)vue的數(shù)據(jù)對(duì)象添加樣式</h1>

<h1 :style="testObj"> 通過(guò)vue的數(shù)據(jù)對(duì)象添加樣式</h1>

</div>

</body>

let vm = new Vue({

el: '#app',

data: {

styleObj: "color:green;font-size:80px;background-color:red;",

testObj: {

color: 'blue',//注意是對(duì)象，對(duì)象的各個(gè)屬性之間使用逗號(hào)隔開(kāi)，而不是分號(hào)

fontSize: '90px',

backgroundColor: 'pink'

}

});

</script>

在綁定數(shù)組的時(shí)候，數(shù)組中的元素來(lái)源于data中的數(shù)據(jù)，所以不需要加引號(hào)。

7.2 class綁定

除了進(jìn)行style行內(nèi)樣式的綁定，也可以進(jìn)行class樣式的綁定。

7.2.1 原生class語(yǔ)法

可以直接在DOM元素上加入class屬性，進(jìn)行定義樣式，示例如下：

<style>

.red {

color: red;

}

.bk {

background-color: pink;

}

</style>

</head>

<body>

<div id="app">

<!-- 直接添加原生態(tài)的樣式 -->

<h1 class="red bk">直接添加class樣式</h1>

</div>

</body>

<script>

let vm = new Vue({

el: '#app',

data: {

}

});

</script>

直接在DOM元素上通過(guò)class屬性添加多個(gè)class樣式規(guī)則，注意此時(shí)class沒(méi)有加冒號(hào)。

7.2.2 屬性綁定

通過(guò)Vue的屬性綁定，示例代碼如下：

<style>

.red {

color: red;

}

.bk {

background-color: pink;

}

</style>

</head>

<body>

<h1 class="red bk">直接添加class樣式</h1>

<h1 :class="'red bk'">屬性綁定添加</h1>

</div>

</body>

let vm = new Vue({

el: '#app',

data: {

}

});

</script>

程序運(yùn)行結(jié)果如下：

圖 7- 3 原生態(tài)和屬性綁定添加

通過(guò)屬性綁定添加，后面的class類名要加引號(hào)，否則會(huì)去data中尋找red和bk這樣的變量，如果加了，則是直接引用這兩個(gè)class樣式。

7.2.3 對(duì)象綁定

現(xiàn)在我們讓屬性綁定一個(gè)data中的數(shù)據(jù)對(duì)象，示例代碼如下：

<style>

.red {

color: red;

}

.bk {

background-color: pink;

}

.fs {

font-size: larger;

font-style: italic;

}

</style>

</head>

<body>

<h1 class="red bk">直接添加class樣式</h1>

<h1 :class="'red bk'">屬性綁定添加</h1>

</div>

</body>

let vm = new Vue({

el: '#app',

data: {

flag: true,

clsobj: {

'red': true,

'bk': true,

'fs': true

}

});

</script>

程序運(yùn)行結(jié)果如下：

圖 7- 4 使用Vue對(duì)象綁定

使用對(duì)象的時(shí)候，對(duì)象的屬性就是class的類名，值是Boolean類型，如果是true則是啟用這個(gè)類樣式，否則則是不使用。

7.2.4 數(shù)組綁定

第一種：直接使用數(shù)組

style樣式代碼：

<style>

.red {

color: red;

}

.thin {

font-weight: 200;

}

.italic {

font-style: italic;

}

.active {

letter-spacing: 0.5em;

}

</style>

示例代碼：

<h2 :class="['red','thin']">這是一個(gè)很大很大的H2，大到你無(wú)法想象！！！</h2>

數(shù)組中的元素必須加引號(hào)，否則會(huì)去Vue實(shí)例中尋找對(duì)應(yīng)的變量數(shù)據(jù)。

第二種：數(shù)組中使用三元表達(dá)式

示例代碼：

<h3 :class="['thin', 'italic', flag?'active':'']">這是一個(gè)很大很大的H3，大到你無(wú)法想象！！！</h3>

這上面使用的data中的數(shù)據(jù)flag，如果flag為true，則使用active這個(gè)class樣式，否則是空樣式。

第三種：數(shù)組中是data數(shù)據(jù)

示例代碼：

<h4 :class="['thin', 'italic', {active:flag} ]">這是一個(gè)很大很大的H4，大到你無(wú)法想象！！！</h4>

上述示例數(shù)組中第三個(gè)元素是個(gè)對(duì)象，對(duì)象的鍵是style中已知存在的類名，值是boolean類型，如果為true，則采用該類樣式，否則則不采用。

總結(jié)：設(shè)置class樣式需要使用v-bind綁定；

1、使用[]設(shè)置樣式，中括號(hào)里的樣式必須加引號(hào)，否則被識(shí)別為變量；

2、可以使用對(duì)象表示class樣式，鍵是類名，值是Boolean類型

3、使用對(duì)象類名可以不加引號(hào)，但是為了區(qū)別變量，建議加上；

7.2.5 用在組件上

當(dāng)在一個(gè)自定義組件上使用 class property 時(shí)，這些 class 將被添加到該組件的根元素上面。這個(gè)元素上已經(jīng)存在的 class 不會(huì)被覆蓋。

例如，如果你聲明了這個(gè)組件：

Vue.component('my-component', {

template: '<p class="foo bar">Hi</p>'

})

然后在使用它的時(shí)候添加一些 class：

<my-component class="baz boo"></my-component>

HTML 將被渲染為：

對(duì)于帶數(shù)據(jù)綁定 class 也同樣適用：

<my-component v-bind:class="{ active: isActive }"></my-component>

當(dāng) isActive 為 true時(shí)，HTML 將被渲染成為：

7.3 本章小結(jié)

Vue中使用行內(nèi)樣式可以屬性綁定，對(duì)象綁定，和數(shù)組綁定；
Vue中使用class樣式同樣是屬性綁定，對(duì)象綁定和數(shù)組綁定，但是在對(duì)象綁定的時(shí)候，鍵是class類名，值是boolean類型的數(shù)據(jù)，如果值為真，則采用，否則則不采用；

7.4 理論試題與實(shí)踐練習(xí)

1.編程題

給第六章的綜合案例，使用本章的知識(shí)添加樣式。

小節(jié)基本要求：

了解css文件是做什么的---樣式構(gòu)建
了解html文件是做什么的---網(wǎng)站文本構(gòu)建
了解css+htm是能做什么---能完成一個(gè)完整靜態(tài)網(wǎng)站的構(gòu)建
了解什么是標(biāo)簽以及父子關(guān)系

要點(diǎn)：

1、樣式選擇器class

class(樣式)選擇器能做什么

在實(shí)際開(kāi)發(fā)網(wǎng)站中，css規(guī)定了兩種選擇器，一種是樣式選擇器class，一種是Id選擇器#。

class翻譯過(guò)來(lái)有種類的意思，中國(guó)人將它弄得好聽(tīng)點(diǎn)兒，就叫樣式。

描出一個(gè)網(wǎng)站輪廓，利用樣式選擇器就夠了。

一個(gè)很簡(jiǎn)單的例子：

1、寫一個(gè)html文件，在body里面寫一個(gè)div標(biāo)簽，標(biāo)簽中文本寫上一段字：hello world！

2、右鍵run，運(yùn)行一下看效果

3、我想給這個(gè)div標(biāo)簽變成一個(gè)框我該怎么做？很簡(jiǎn)單，如下，給div標(biāo)簽加一個(gè)樣式選擇器。

要點(diǎn)：

注意寫法以及寫的位置
這個(gè)haha就是我為這個(gè)選擇器取的名字！名字可以隨便取!

4、右鍵run，運(yùn)行一下

可以看到，并沒(méi)有框！

為什么沒(méi)有？

那是因?yàn)槲译m然定義了這個(gè)名叫haha的css選擇器，但是還沒(méi)有去編寫它的代碼！

5、為了省事，我就不新建一個(gè)css文件了，直接在這個(gè)html文件中寫css代碼。

要點(diǎn)：

注意寫法，我用了一個(gè)標(biāo)識(shí)符 . ，這個(gè)點(diǎn)是一個(gè)標(biāo)志，標(biāo)志什么？標(biāo)志這個(gè)haha 就是一個(gè)樣式選擇器。

解釋一下haha選擇器中代碼的含義：

boder:1px solid red;  設(shè)置邊框：尺寸為1，單線，顏色為紅色。
height:300px;  設(shè)置高度為300px
width:300px;    設(shè)置寬度為300px

6、右鍵run，運(yùn)行一下

現(xiàn)在div標(biāo)簽的邊框就出來(lái)了！與在.haha選擇器中規(guī)定的樣式是一樣的，紅色邊框，尺寸為1

總結(jié)：

樣式選擇器class是css文件中的常客，作用是來(lái)為html標(biāo)簽設(shè)置顏色、寬高、位置等。

用法：

第一步，在標(biāo)簽內(nèi)這樣寫

<div class="hehe">你好</div>

第二步，在css文件中定義我們?cè)O(shè)置的這個(gè)class選擇器，hehe

.hehe{
	 border:1px solid red;	  設(shè)置邊框樣式
   height:300px;							設(shè)置邊框高度
  width:300px;				設(shè)置邊框?qū)挾?}

下一篇會(huì)將上一篇寫好的網(wǎng)站body邊框給描繪出來(lái)！

在線咨詢

上一篇：CSS的字體
下一篇：HTML 樣式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

「項(xiàng)目實(shí)戰(zhàn)」從終端到瀏覽器：實(shí)現(xiàn) ANSI 字體在前端頁(yè)面的彩色展示

言

ANSI 轉(zhuǎn)義序列

前端頁(yè)面直接查看日志內(nèi)容

前端頁(yè)面還原彩色文本效果

后記

7.1 style綁定

7.1.1 直接添加行內(nèi)樣式

7.1.2 屬性綁定

7.1.3 對(duì)象綁定

7.1.4 數(shù)組綁定

7.2 class綁定

7.2.1 原生class語(yǔ)法

7.2.2 屬性綁定

7.2.3 對(duì)象綁定

7.2.4 數(shù)組綁定

第一種：直接使用數(shù)組

第二種：數(shù)組中使用三元表達(dá)式

第三種：數(shù)組中是data數(shù)據(jù)

7.2.5 用在組件上

7.3 本章小結(jié)

7.4 理論試題與實(shí)踐練習(xí)

1.編程題

class(樣式)選擇器能做什么

總結(jié)：

您的項(xiàng)目需求