本节课学习的指令比较多,但是都很简单,

直接看代码


v-text_数据

之前绑定数据都是这么玩的,还有一种新的玩法,是通过指令


v-text_数据_02

上面代码时用了v-text 和v-html两个指令。

嗯 v-text 指令 那个p 标签里面 会显示<h1>hrllo</h1>vue

v-html 指令那个p标签会显示 hello vue

text 指令就是 不解析 data数据中心属性值里面的html 标签

html 会解析


v-text_html_03

上面代码 我们用了一个 v-show  。

v-show绑定的数据是ok ,ok 在数据中心里面是true  然后就会显示p标签,如果OK 在data数据中心是false 那么就会隐藏p。

v-show和v-if是差不多一样的。

上面代码 有运营到了我们之前说的操作层methods 绑定了一个点击事件sss  点击一下 数据中心的OK 变成false 或者变成true  相当于一个开关。


在回顾一下 点击事件 还可以用@代替v-on 哦


v-text_html_04


这段代码 吧v-show 改成了 v-if  效果是一样的


v-show 和 v-if 的区别

v-show 是没有预加载,通过控制css来显示的

v-if 是有预加载,通过条件判断 显示隐藏




v-text_html_05