前端_006_Vue2-模版语法

#文本
{{message}}
{{message.split('')}} //支持JS表达式

v-once  无值  //表示该值只渲染一次

v-html 值为String

v-bind:[attribute]  缩写 :[attribute] //支持属性值中使用JS表达式

v-if 值为String //控制是否移除该元素
v-show 值为String //控制是否展示，DOM元素一直在

v-on:[Event]   缩写 @[event]  //绑定事件   支持属性值中使用JS表达式

v-for 值为String  "item in items" "(value,name) in object" //可以遍历数组或者对象里属性

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

v-model,v-for,v-bind组合使用
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

注意：v-on:[event] 事件处理支持事件修饰符

键盘修饰符

系统修饰符