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学院在各大学院中处于选中状态



    
    Title
    



{{c}}

你可能感兴趣的:(1-6 vue指令 v-text)