当前位置: 开发笔记 > 编程语言 > 正文

VUE常用指令

作者：花儿在绽放2502857073 | 来源：互联网 | 2023-10-12 11:04

vue指令使我们入手使用vue的桥梁，没有这些基石，一切高级应用都是空话。1.【v-text、v-html】v-text：用于绑定文本v-

vue指令使我们入手使用vue的桥梁&＃xff0c;没有这些基石&＃xff0c;一切高级应用都是空话。

1.【v-text、v-html】

v-text&＃xff1a;用于绑定文本

v-html&＃xff1a;用于绑定html

姓名&＃xff1a;

姓名&＃xff1a;{{Name}}

年龄&＃xff1a;

-------->

姓名&＃xff1a;Wangxc

1.{{Name}}这种学法和v-text的作用是相同的&＃xff0c;用于绑定标签的text属性。如果标签没有text属性&＃xff0c;该绑定会失效&＃xff0c;比如在一个文本框上面使用v-text时没有效果的。

2.从结果看出&＃xff0c;v-html绑定后会覆盖原来标签里面的内容&＃xff0c;此处是覆盖而非append。

3.对于v-html应用时要慎重&＃xff0c;在网站上会动态渲染任意html有一定的危险存在&＃xff0c;因此容易导致XSS跨站脚本攻击。所以最好是在新任的网址上面使用。

4.v-text和v-html绑定都是单向的&＃xff0c;只能从Model到View的绑定&＃xff0c;不能实现View到Model的更新。

2.v-model指令

v-model实现双向绑定&＃xff0c;vue限定只能对表单控件进行绑定&＃xff0c;常见的由input、select、textarea等。

编辑姓名&＃xff1a;

姓名&＃xff1a;{{Name}}

编辑备注&＃xff1a;

备注&＃xff1a;{{Remark}}

for&＃61;"basketball">篮球for&＃61;"football">足球for&＃61;"running">跑步

学生爱好&＃xff1a;{{Hobby}}

户籍&＃xff1a;{{Huji}}

3.v-if、v-else指令

v-if和v-else在使用条件运算符判断时常用&＃xff0c;需要说明的是&＃xff0c;v-if可以单独使用&＃xff0c;但是v-else的前面必须有一个v-if的条件或v-show指令。

这里的v-else可以不写&＃xff0c;expression表达式是一个返回bool类型的属性或者表达式。

姓名&＃xff1a;

是否已婚&＃xff1a;if&＃61;"IsMarry">是否

大人or小孩&＃xff1a;if&＃61;"Age>18">大人小孩

单位&＃xff1a;{{School}}

//--------->
姓名&＃xff1a;wangxc
是否已婚&＃xff1a;是
大人or小孩&＃xff1a;大人
单位&＃xff1a;欣网

4.v-show指令

v-show指令表示根据表达式的bool值来决定是否显示该元素。如果bool是false&＃xff0c;对应的dom标签还是会渲染到页面上&＃xff0c;只是css的display设为none而已&＃xff0c;而如果用v-if&＃xff0c;bool值为false时整个dom树都不会被渲染到页面上。从这点来说&＃xff0c;如果需求是需要经常切换元素的显示和隐藏&＃xff0c;使用v-shew效率更高&＃xff0c;而如果只做一次条件判断&＃xff0c;则使用v-if更加合适。

v-show常和v-else 一起使用&＃xff0c;表示如果v-show条件满足则显示当前标签&＃xff0c;否则显示v-else标签。

姓名&＃xff1a;

是否已婚&＃xff1a;是

//----------->
姓名&＃xff1a;Wangxc
是否已婚&＃xff1a;