[Vue] 模板语法

Vue 模板语法

{{ }} --文本插值

作用： 进行文本插值，将文本与数据绑定

示例：

<span>Message: {{ msg }}</span>

v-once 一次性插值:你能执行一次性地插值，当数据改变时，插值处的内容不会更新。

示例：

<span v-once>Message: {{ msg }}</span>

v-html --原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。

为了输出真正的 HTML，你需要使用 v-html

语法：

<p v-html="intro">hello</p>

意思是将 intro 值渲染到 p 标签中

v-bind --HTML attribute（属性）

双大括号也不能用于 HTML attribute（属性） 上，遇到这种情况应该使用 v-bind 指令

语法：v-bind:属性名=“表达式”

<div v-bind:id="dynamicId"></div>

v-bind:可简写为 :

v-show

作用： 控制元素显示隐藏控制元素显示隐藏

语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

示例：

<p v-show="seen">现在你看到我了</p>

v-if

作用： 控制元素显示隐藏（条件渲染）

语法： v-if= "表达式" 表达式值 true显示， false 隐藏

示例：

<p v-if="seen">现在你看到我了</p>

v-else 和 v-else-if

作用：辅助v-if进行判断渲染

语法：v-else="表达式"     v-else-if="表达式"

示例：

<p v-if="gender==1">男生</p><p v-else="gender==2">女生</p>

v-on --事件绑定

语法：

• <button v-on:事件名="内联语句">按钮</button>

• <button v-on:事件名="处理函数">按钮</button>

• <button v-on:事件名="处理函数(实参)">按钮</button>v-on： 可简写为@

<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++">+</button>

v-for --列表渲染

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

• item 是数组中的每一项

• index 是每一项的索引，不需要可以省略

• arr 是被遍历的数组

示例：

<li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
</li>

v-model --双向绑定

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量"

所谓双向绑定就是：

1. 数据改变后，呈现的页面结果会更新

2. 页面结果更新后，数据也会随之而变

账户：<input type="text" v-model="username"> <br><br>
密码：<input type="password" v-model="password"> <br><br>