基本指令

20 阅读1分钟

{{}};胡须语法,用在内容上,不用在元素的属性上

**v-once:**只渲染一次

v-html:标服务器返回的标签解析

v-text:和maustach语法类似

v-pre:不希望解析mustach,原封不动展示内容,元素加了此属性,内容按代码展示

v-cloak:斗篷,vue解析前,这个属性存在(挂在id=app上),给这个属性添加样式;解析后,没有这个属性,对应的样式消失【很少用了】

image.png

v-on: 绑定方法,语法糖为@;

image.png

v-bind: 属性动态赋值,语法糖为: 这里讲下,class类名的动态处理,针对多个css类名。单个可以直接按原始写法。

  • 1、多个class类名动态-对象形式

基本用法: 多个类名以对象形式继承在一起,key是className,value是boolean,true代表使用其classname,false不使用 image.png

image.png

  • 2、多个class类名动态-数组形式

基本用法: 多个类名中,有固定的类,有动态的类,都放在一个数组中,其中固定的类加引号(字符串),动态的不加(变量解析),在方法中操作变量

image.png

image.png dom中,可以看到所有的类

image.png

  • 3、方法形式

基本用法: 在class属性中调用方法,方法中返回数组类型或者对象类型的返回值

image.png

image.png

动态绑定style

对象语法&数组语法,主要讲对象语法

:style={key:vaue},key为css名,value为css属性值,key驼峰

image.png

image.png