Vue中v-bind、v-model、v-on、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会

1. v-bind: 用于绑定一个属性值，可以简写为一个冒号 :

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
 
<!-- 缩写 -->
<a :href="url">...</a>

2. v-model: 创建数据和视图之间的双向绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

3. v-on: 用于监听事件，可以简写为@

<!-- 完整语法 -->
<button v-on:click="doSomething">Click me</button>
 
<!-- 缩写 -->
<button @click="doSomething">Click me</button>

4. v-for: 用于循环数组或对象中的元素

<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>

5. v-if: 条件性的渲染元素，如果为false，元素不会被渲染

<p v-if="seen">Now you see me</p>

6. v-else: 为v-if或v-else-if提供else块

<p v-if="seen">Now you see me</p>
<p v-else>Now you don't</p>

7. v-show: 根据表达式之真假值，切换元素的display CSS属性

<p v-show="isVisible">I am visible</p>

8. v-text: 更新元素的textContent

<span v-text="msg"></span> <!-- 等价于 -->
<span>{{msg}}</span>

9. v-html: 更新元素的innerHTML

<div v-html="rawHtml"></div>

注意：v-html可能会导致跨站脚本攻击(XSS)的风险，只在可信的内容上使用它。