指令:值是表达式,不支持{{}}
常用指令
逻辑处理
v-if 与 v-show:
v-if:值是true时渲染标签,否则不渲染标签(删除:即DOM中不存在v-if值为false的标签);
v-show:始终渲染结构,但是会根据值来显示或隐藏标签;
v-else 与 v-else-if:与v-if配合;
v-for:
作用:根据数据循环渲染v-for指令所在的元素及其子元素;
可以循环数据:Array|Object|number|string|Iterable
v-for也可以使用of语法,与in没有区别
:key:默认情况下,在渲染DOM的时候使用原地复用,这样一般情况下会比较高校,但对于循环列表,特别是依赖某种状态的列表,会有一些问题,可以通过:key属性来给每个循环节点添加一个标识,值必须是唯一的
内容输出
v-text 、v-cloak:
[参考vue笔记1]
v-html:
为了防止xss攻击,默认情况下输出采用的是innerText,通过 v-html 可以让内容作为 html 进行解析
v-once:
只渲染元素和组件一次,后期的更新不再渲染
v-pre:
忽略这个元素和它子元素内容的编译(原字符输出)
属性绑定
v-bind:
简写::
作用:绑定数据(表达式)到指定的属性上,<div v-bind:参数="值(表达式)"></div>;
参数:指定的属性名称
style
class