[{"data":1,"prerenderedAt":508},["ShallowReactive",2],{"blog:\u002Fblog\u002Fvue\u002Fv-bind":3},{"id":4,"title":5,"author":6,"body":7,"category":493,"date":494,"description":495,"draft":496,"extension":497,"image":498,"meta":499,"navigation":88,"path":500,"seo":501,"series":498,"seriesOrder":498,"seriesTitle":498,"stem":502,"tags":503,"updatedAt":506,"__hash__":507},"blog\u002Fblog\u002Fvue\u002Fv-bind.md","v-bind 屬性綁定指令","charles",{"type":8,"value":9,"toc":490},"minimark",[10,22,26,51,54,60,153,158,243,248,300,305,433,438,486],[11,12,13,14,21],"p",{},"v-bind 是 Vue 提供的 ",[15,16,20],"a",{"href":17,"rel":18},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fbuilt-in-directives.html#v-bind",[19],"nofollow","🔗 指令 (directive)"," 之一，用來綁定屬性。透過 v-bind 可以讓元素的屬性值動態更新，例如 class、style、href 等屬性。除了原生 HTML 元素的屬性之外，v-bind 也廣泛應用於自定義元件，特別是綁定 props 屬性。當你在使用自定義元件時，可以使用 v-bind 動態地將父元件的資料綁定到子元件的 props，使元件間的資料流更靈活且易於維護。",[23,24,25],"h2",{"id":25},"基本使用方式",[27,28,29,37],"ol",{},[30,31,32,36],"li",{},[33,34,35],"code",{},"v-bind:attribute=\"變數名稱\"","：在元素上使用 v-bind 指令，並指定屬性名稱與變數名稱。",[30,38,39,42,43,46,47,50],{},[33,40,41],{},":attribute=\"變數名稱\"","：",[33,44,45],{},"v-bind"," 的縮寫，可以直接使用 ",[33,48,49],{},":"," 符號來綁定屬性。",[52,53],"br",{},[55,56,57],"ul",{},[30,58,59],{},"綁定 href 屬性",[61,62,67],"pre",{"className":63,"code":64,"language":65,"meta":66,"style":66},"language-vue:line-numbers shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cscript setup>\n  import { ref } from 'vue';\n\n  const url = ref('https:\u002F\u002Fvuejs.org');\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ca v-bind:href=\"url\">\n    Vue.js Official Website\n  \u003C\u002Fa>\n  \u003Ca :href=\"url\">\n    Vue.js Official Website\n  \u003C\u002Fa>\n\u003C\u002Ftemplate>\n","vue:line-numbers","",[33,68,69,77,83,90,96,102,107,113,119,125,131,137,142,147],{"__ignoreMap":66},[70,71,74],"span",{"class":72,"line":73},"line",1,[70,75,76],{},"\u003Cscript setup>\n",[70,78,80],{"class":72,"line":79},2,[70,81,82],{},"  import { ref } from 'vue';\n",[70,84,86],{"class":72,"line":85},3,[70,87,89],{"emptyLinePlaceholder":88},true,"\n",[70,91,93],{"class":72,"line":92},4,[70,94,95],{},"  const url = ref('https:\u002F\u002Fvuejs.org');\n",[70,97,99],{"class":72,"line":98},5,[70,100,101],{},"\u003C\u002Fscript>\n",[70,103,105],{"class":72,"line":104},6,[70,106,89],{"emptyLinePlaceholder":88},[70,108,110],{"class":72,"line":109},7,[70,111,112],{},"\u003Ctemplate>\n",[70,114,116],{"class":72,"line":115},8,[70,117,118],{},"  \u003Ca v-bind:href=\"url\">\n",[70,120,122],{"class":72,"line":121},9,[70,123,124],{},"    Vue.js Official Website\n",[70,126,128],{"class":72,"line":127},10,[70,129,130],{},"  \u003C\u002Fa>\n",[70,132,134],{"class":72,"line":133},11,[70,135,136],{},"  \u003Ca :href=\"url\">\n",[70,138,140],{"class":72,"line":139},12,[70,141,124],{},[70,143,145],{"class":72,"line":144},13,[70,146,130],{},[70,148,150],{"class":72,"line":149},14,[70,151,152],{},"\u003C\u002Ftemplate>\n",[55,154,155],{},[30,156,157],{},"綁定 class 屬性",[61,159,161],{"className":63,"code":160,"language":65,"meta":66,"style":66},"\u003Cscript setup>\n  import { ref } from 'vue';\n\n  const isActive = ref(true);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"{ active: isActive }\">\n    Active\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n  .active {\n    color: red;\n  }\n\u003C\u002Fstyle>\n",[33,162,163,167,171,175,180,184,188,192,197,202,207,211,215,220,225,231,237],{"__ignoreMap":66},[70,164,165],{"class":72,"line":73},[70,166,76],{},[70,168,169],{"class":72,"line":79},[70,170,82],{},[70,172,173],{"class":72,"line":85},[70,174,89],{"emptyLinePlaceholder":88},[70,176,177],{"class":72,"line":92},[70,178,179],{},"  const isActive = ref(true);\n",[70,181,182],{"class":72,"line":98},[70,183,101],{},[70,185,186],{"class":72,"line":104},[70,187,89],{"emptyLinePlaceholder":88},[70,189,190],{"class":72,"line":109},[70,191,112],{},[70,193,194],{"class":72,"line":115},[70,195,196],{},"  \u003Cdiv :class=\"{ active: isActive }\">\n",[70,198,199],{"class":72,"line":121},[70,200,201],{},"    Active\n",[70,203,204],{"class":72,"line":127},[70,205,206],{},"  \u003C\u002Fdiv>\n",[70,208,209],{"class":72,"line":133},[70,210,152],{},[70,212,213],{"class":72,"line":139},[70,214,89],{"emptyLinePlaceholder":88},[70,216,217],{"class":72,"line":144},[70,218,219],{},"\u003Cstyle>\n",[70,221,222],{"class":72,"line":149},[70,223,224],{},"  .active {\n",[70,226,228],{"class":72,"line":227},15,[70,229,230],{},"    color: red;\n",[70,232,234],{"class":72,"line":233},16,[70,235,236],{},"  }\n",[70,238,240],{"class":72,"line":239},17,[70,241,242],{},"\u003C\u002Fstyle>\n",[55,244,245],{},[30,246,247],{},"綁定 style 屬性",[61,249,251],{"className":63,"code":250,"language":65,"meta":66,"style":66},"\u003Cscript setup>\n  import { ref } from 'vue';\n\n  const color = ref('red');\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :style=\"{ color: color }\">\n    Color: {{ color }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[33,252,253,257,261,265,270,274,278,282,287,292,296],{"__ignoreMap":66},[70,254,255],{"class":72,"line":73},[70,256,76],{},[70,258,259],{"class":72,"line":79},[70,260,82],{},[70,262,263],{"class":72,"line":85},[70,264,89],{"emptyLinePlaceholder":88},[70,266,267],{"class":72,"line":92},[70,268,269],{},"  const color = ref('red');\n",[70,271,272],{"class":72,"line":98},[70,273,101],{},[70,275,276],{"class":72,"line":104},[70,277,89],{"emptyLinePlaceholder":88},[70,279,280],{"class":72,"line":109},[70,281,112],{},[70,283,284],{"class":72,"line":115},[70,285,286],{},"  \u003Cdiv :style=\"{ color: color }\">\n",[70,288,289],{"class":72,"line":121},[70,290,291],{},"    Color: {{ color }}\n",[70,293,294],{"class":72,"line":127},[70,295,206],{},[70,297,298],{"class":72,"line":133},[70,299,152],{},[55,301,302],{},[30,303,304],{},"綁定多個 class 或 style 屬性，以及搭配三元運算子",[61,306,308],{"className":63,"code":307,"language":65,"meta":66,"style":66},"\u003Cscript setup>\n  import { ref } from 'vue';\n\n  const isActive = ref(true);\n  const color = 'red';\n  const fontSize = '16px';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    :class=\"[isActive ? 'active' : 'inactive']\"\n    :style=\"[`color: ${color}; font-size: ${fontSize}`]\"\n  >\n    Active\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n  .active {\n  color: red;\n}\n\n.inactive {\n  color: blue;\n}\n\u003C\u002Fstyle>\n",[33,309,310,314,318,322,326,331,336,340,344,348,353,358,363,368,372,376,380,384,389,394,400,406,411,417,423,428],{"__ignoreMap":66},[70,311,312],{"class":72,"line":73},[70,313,76],{},[70,315,316],{"class":72,"line":79},[70,317,82],{},[70,319,320],{"class":72,"line":85},[70,321,89],{"emptyLinePlaceholder":88},[70,323,324],{"class":72,"line":92},[70,325,179],{},[70,327,328],{"class":72,"line":98},[70,329,330],{},"  const color = 'red';\n",[70,332,333],{"class":72,"line":104},[70,334,335],{},"  const fontSize = '16px';\n",[70,337,338],{"class":72,"line":109},[70,339,101],{},[70,341,342],{"class":72,"line":115},[70,343,89],{"emptyLinePlaceholder":88},[70,345,346],{"class":72,"line":121},[70,347,112],{},[70,349,350],{"class":72,"line":127},[70,351,352],{},"  \u003Cdiv\n",[70,354,355],{"class":72,"line":133},[70,356,357],{},"    :class=\"[isActive ? 'active' : 'inactive']\"\n",[70,359,360],{"class":72,"line":139},[70,361,362],{},"    :style=\"[`color: ${color}; font-size: ${fontSize}`]\"\n",[70,364,365],{"class":72,"line":144},[70,366,367],{},"  >\n",[70,369,370],{"class":72,"line":149},[70,371,201],{},[70,373,374],{"class":72,"line":227},[70,375,206],{},[70,377,378],{"class":72,"line":233},[70,379,152],{},[70,381,382],{"class":72,"line":239},[70,383,89],{"emptyLinePlaceholder":88},[70,385,387],{"class":72,"line":386},18,[70,388,219],{},[70,390,392],{"class":72,"line":391},19,[70,393,224],{},[70,395,397],{"class":72,"line":396},20,[70,398,399],{},"  color: red;\n",[70,401,403],{"class":72,"line":402},21,[70,404,405],{},"}\n",[70,407,409],{"class":72,"line":408},22,[70,410,89],{"emptyLinePlaceholder":88},[70,412,414],{"class":72,"line":413},23,[70,415,416],{},".inactive {\n",[70,418,420],{"class":72,"line":419},24,[70,421,422],{},"  color: blue;\n",[70,424,426],{"class":72,"line":425},25,[70,427,405],{},[70,429,431],{"class":72,"line":430},26,[70,432,242],{},[55,434,435],{},[30,436,437],{},"綁定 component 的 props 屬性",[61,439,441],{"className":63,"code":440,"language":65,"meta":66,"style":66},"\u003Cscript setup>\n  import { TestComponent } from '.\u002FTestComponent.vue';\n  import { ref } from 'vue';\n\n  const message = ref('Hello, Vue.js!');\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTestComponent :message=\"message\" \u002F>\n\u003C\u002Ftemplate>\n",[33,442,443,447,452,456,460,465,469,473,477,482],{"__ignoreMap":66},[70,444,445],{"class":72,"line":73},[70,446,76],{},[70,448,449],{"class":72,"line":79},[70,450,451],{},"  import { TestComponent } from '.\u002FTestComponent.vue';\n",[70,453,454],{"class":72,"line":85},[70,455,82],{},[70,457,458],{"class":72,"line":92},[70,459,89],{"emptyLinePlaceholder":88},[70,461,462],{"class":72,"line":98},[70,463,464],{},"  const message = ref('Hello, Vue.js!');\n",[70,466,467],{"class":72,"line":104},[70,468,101],{},[70,470,471],{"class":72,"line":109},[70,472,89],{"emptyLinePlaceholder":88},[70,474,475],{"class":72,"line":115},[70,476,112],{},[70,478,479],{"class":72,"line":121},[70,480,481],{},"  \u003CTestComponent :message=\"message\" \u002F>\n",[70,483,484],{"class":72,"line":127},[70,485,152],{},[487,488,489],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":66,"searchDepth":85,"depth":85,"links":491},[492],{"id":25,"depth":79,"text":25},"Vue.js","2024-09-09","透過 v-bind 屬性綁定，讓元素可以動態更新屬性",false,"md",null,{},"\u002Fblog\u002Fvue\u002Fv-bind",{"title":5,"description":495},"blog\u002Fvue\u002Fv-bind",[504,505],"Vue","Frontend","2024-09-21","VMyHUrLwEfEZIgFspgegZmi9dfmAW6yy4KMBdmerxN0",1780512501677]