1-6 vue指令 v-text

vue指令 v-text

• v-text 更新元素文本内容, 让元素的文本内容显示属性的内容

1.v-text

    
{{message}}, 那我们爬山去吧!
    
那我们爬山去吧!

2.v-bind

• v-bind指令 动态地绑定一个或多个特性，或一个组件 prop 到表达式。

• v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：

  • v-bind:src="imageSrc" 可以缩写： :src="imgaeSrc"

  • :class="{ red: isRed }"

  
  上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值 。
  

  • :class="[classA, classB]" ...

  • :style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...

  • 绑定一个有属性的对象，比如：
    v-bind="{ id: someProp, 'other-attr': otherProp }"

• 语法结构：v-bind:argument="expression"

    
    

    
    ![](imageSrc)

3.v-bind 案例

• 案例实操：让HTML5学院在各大学院中处于选中状态

    
    
    




    
{{c}}