
Vue常用指令
指令介绍
- 指令:是带有 v- 前缀的特殊属性,不同指令具有不同含义。例如 v-html,v-if,v-for。
- 使用指令时,通常编写在标签的属性上,值可以使用 JS 的表达式。
- 常用指令
文本插值
- v-html:把文本解析为 HTML 代码。
<div>
<div>{{msg}}</div>
<div v-html="msg"></div>
</div>
绑定属性
- v-bind:为 HTML 标签绑定属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>绑定属性</title>
</head>
<div>
<a v-bind:href="url">百度一下</a>
<br>
<a :href="url">百度一下</a>
<br>
<div :class="cls">我是div</div>
</div>
</html>
条件渲染
- v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。
- v-else:条件性的渲染。
- v-else-if:条件性的渲染。
- v-show:根据条件展示某元素,区别在于切换的是display属性的值。
<div>
<!-- 判断num的值,对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3 -->
<div v-if="num % 3 == 0">div1</div>
<div v-else-if="num % 3 == 1">div2</div>
<div v-else="num % 3 == 2">div3</div>
<div v-show="flag">div4</div>
</div>
列表渲染
- v-for:列表渲染,遍历容器的元素或者对象的属性。
<div>
<ul>
<li v-for="name in names">
{{name}}
</li>
<li v-for="value in student">
{{value}}
</li>
</ul>
</div>
事件绑定
- v-on:为 HTML 标签绑定事件。
<div>
<div>{{name}}</div>
<button v-on:click="change()">改变div的内容</button>
<button v-on:dblclick="change()">改变div的内容</button>
<button @click="change()">改变div的内容</button>
</div>
表单绑定
- 表单绑定
v-model:在表单元素上创建双向数据绑定。 - 双向数据绑定
更新data数据,页面中的数据也会更新。
更新页面数据,data数据也会更新。 - MVVM模型(ModelViewViewModel):是MVC模式的改进版
在前端页面中,JS对象表示Model,页面表示View,两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel,它是桥梁。
ViewModel负责把Model的数据同步到View显示出来,还负责把View修改的数据同步回Model。
总结:
- 指令:是带有v-前缀的特殊属性,不同指令具有不同含义。
- 文本插值
v-html:把文本解析为HTML代码。 - 绑定属性
v-bind:为HTML标签绑定属性值。 - 条件渲染
v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。
v-else:条件性的渲染。
v-else-if:条件性的渲染。
v-show:根据条件展示某元素,区别在于切换的是display属性的值。 - 列表渲染
v-for:列表渲染,遍历容器的元素或者对象的属性。 - 事件绑定
v-on:为HTML标签绑定事件。 - 表单绑定
v-model:在表单元素上创建双向数据绑定。
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 Eternal Night
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果