[{"data":1,"prerenderedAt":192},["ShallowReactive",2],{"note-\u002Fnotes\u002Fsync\u002Fvue-05-class-and-style-bindings":3},{"id":4,"title":5,"body":6,"category":179,"date":180,"description":181,"draft":182,"extension":183,"meta":184,"navigation":90,"path":185,"seo":186,"sourcePath":187,"stem":188,"tags":189,"__hash__":191},"notes\u002Fnotes\u002Fsync\u002Fvue-05-class-and-style-bindings.md","Class and Style Bindings",{"type":7,"value":8,"toc":174},"minimark",[9,22,27,32,43,59,69,116,125,150,159,162,171],[10,11,12,13,17,18,21],"p",{},"在 Vue 中給元素綁定 ",[14,15,16],"code",{},"class"," 或 ",[14,19,20],{},"style"," 時，不用再辛苦地自己「拼字串」，Vue 提供了可以直接傳入「物件（Object）」或「陣列（Array）」的快捷寫法。",[23,24,26],"h2",{"id":25},"binding-html-classes","Binding HTML Classes",[28,29,31],"h3",{"id":30},"binding-to-objects","Binding to Objects",[33,34,35],"ul",{},[36,37,38,39,42],"li",{},"可以透過動態樣式",[14,40,41],{},":class","來傳遞",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-javascript shiki shiki-themes github-light github-dark","\u003Cdiv :class=\"{ active: isActive }\">\u003C\u002Fdiv>\n","javascript","",[14,51,52],{"__ignoreMap":49},[53,54,57],"span",{"class":55,"line":56},"line",1,[53,58,47],{},[33,60,61],{},[36,62,63,65,66,68],{},[14,64,41],{}," 指令也可以與普通的 ",[14,67,16],{}," 屬性共存。例如，在以下狀態：",[44,70,72],{"className":46,"code":71,"language":48,"meta":49,"style":49},"const isActive = ref(true) \nconst hasError = ref(false)\n\n\u003Cdiv \n    class=\"static\" \n    :class=\"{ active: isActive, 'text-danger': hasError }\" >\n\u003C\u002Fdiv>\n\n",[14,73,74,79,85,92,98,104,110],{"__ignoreMap":49},[53,75,76],{"class":55,"line":56},[53,77,78],{},"const isActive = ref(true) \n",[53,80,82],{"class":55,"line":81},2,[53,83,84],{},"const hasError = ref(false)\n",[53,86,88],{"class":55,"line":87},3,[53,89,91],{"emptyLinePlaceholder":90},true,"\n",[53,93,95],{"class":55,"line":94},4,[53,96,97],{},"\u003Cdiv \n",[53,99,101],{"class":55,"line":100},5,[53,102,103],{},"    class=\"static\" \n",[53,105,107],{"class":55,"line":106},6,[53,108,109],{},"    :class=\"{ active: isActive, 'text-danger': hasError }\" >\n",[53,111,113],{"class":55,"line":112},7,[53,114,115],{},"\u003C\u002Fdiv>\n",[33,117,118],{},[36,119,120,121,124],{},"不需要把全部的 Class 物件都硬塞（Inline）在 HTML 模板裡，可以直接把整個物件抽出來寫在 ",[14,122,123],{},"\u003Cscript>"," 裡",[44,126,128],{"className":46,"code":127,"language":48,"meta":49,"style":49},"const classObject = reactive({\n  active: true,\n  'text-danger': false\n})\n",[14,129,130,135,140,145],{"__ignoreMap":49},[53,131,132],{"class":55,"line":56},[53,133,134],{},"const classObject = reactive({\n",[53,136,137],{"class":55,"line":81},[53,138,139],{},"  active: true,\n",[53,141,142],{"class":55,"line":87},[53,143,144],{},"  'text-danger': false\n",[53,146,147],{"class":55,"line":94},[53,148,149],{},"})\n",[44,151,153],{"className":46,"code":152,"language":48,"meta":49,"style":49},"\u003Cdiv :class=\"classObject\">\u003C\u002Fdiv>\n",[14,154,155],{"__ignoreMap":49},[53,156,157],{"class":55,"line":56},[53,158,152],{},[10,160,161],{},"會渲染成：",[44,163,165],{"className":46,"code":164,"language":48,"meta":49,"style":49},"\u003Cdiv class=\"active\">\u003C\u002Fdiv>\n",[14,166,167],{"__ignoreMap":49},[53,168,169],{"class":55,"line":56},[53,170,164],{},[20,172,173],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":49,"searchDepth":81,"depth":81,"links":175},[176],{"id":25,"depth":81,"text":26,"children":177},[178],{"id":30,"depth":87,"text":31},"frontend","2026-08-05","在 Vue 中給元素綁定 class 或 style 時，不用再辛苦地自己「拼字串」，Vue 提供了可以直接傳入「物件（Object）」或「陣列（Array）」的快捷寫法。",false,"md",{},"\u002Fnotes\u002Fsync\u002Fvue-05-class-and-style-bindings",{"title":5,"description":181},"Vue\u002F05-Class and Style Bindings.md","notes\u002Fsync\u002Fvue-05-class-and-style-bindings",[190],"Vue","VhWQkErVUvw9h3yjRWEmW85hBpu6PSNeNeMot0Ns1LA",1788767747604]