Vue.js指令讲解

Vue.js指令讲解

v-text
将一段纯文本渲染到使用v-text的元素中。 且会覆盖标签内原有的内容。
Vue.js指令讲解_第1张图片

渲染在指令所在的标签内
Vue.js指令讲解_第2张图片

v-html
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。

Vue.js指令讲解_第3张图片
:在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。
只在可信内容上使用 v-html,永不用在用户提交的内容上。

v-bind
用于动态地绑定一个或多个特性,或一个组件 prop 到表达式。
Vue.js指令讲解_第4张图片

绑定class属性时:
Vue.js指令讲解_第5张图片

绑定style属性时
Vue.js指令讲解_第6张图片
**注:**在vue中,双引号中使用单引号的的变量将会被解析成字符串,所以" ‘px’ "表示是字符串。

v-model
用于双向数据绑定:当视图模型改变时,数据模型随之改变;当数据模型改变时,
视图模型随之改变;即为同步变化。

Vue.js指令讲解_第7张图片

v-if
通过操作DOM创建与删除元素来 操作显示与隐藏;在切换时元素及它的数据绑定被销毁并重建。

在这里插入图片描述

注:

  1. 渲染大量数据时严重消耗性能。
  2. 涉及异步数据渲染时,用v-if。

v-show
通过添加 style="display:none"和移除它来控制元素的显示和隐藏
Vue.js指令讲解_第8张图片

**注:**涉及到大量元素的切换显示与隐藏时,使用v-show,相比使用 v-if 消耗性能更小。

你可能感兴趣的:(Vue.js,vue指令,vue指令讲解)