宁夏网站建设价格,信用网站建设工作简报,阿里云应用镜像wordpress,自己建立网站怎么建目录 一、v-show二、v-if2.1 基本使用2.2 条件渲染分组2.3 与 v-else-if、v-else 结合使用 三、v-if vs v-show四、测试案例 本节条件渲染所涉及到的指令有#xff1a;
v-showv-ifv-else-ifv-else 一、v-show 1. 用法#xff1a;
语法: v-show 表达式#xff… 目录 一、v-show二、v-if2.1 基本使用2.2 条件渲染分组2.3 与 v-else-if、v-else 结合使用 三、v-if vs v-show四、测试案例 本节条件渲染所涉及到的指令有
v-showv-ifv-else-ifv-else 一、v-show 1. 用法
语法: v-show 表达式适用于切换频率较高的场景h2 v-showfalse欢迎来到{{name}}/h2h2 v-show11欢迎来到{{name}}/h2
div idrooth2 v-showfalse欢迎来到{{name}}/h2h2 v-show11欢迎来到{{name}}/h2
/div
scriptnew Vue({el:#root,data:{name:Vue,n:0}})
/script2. 页面生成的DOM结构如下 上述的截图中我们可以看到v-show指令是通过设置display: none;来设置元素的可见性。
由此我们可以得出一个结论带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
3. 注意
v-show 不支持 template 元素也不支持 v-else。 二、v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
2.1 基本使用
h2 v-iffalse欢迎来到{{name}}/h2
h2 v-if11欢迎来到{{name}}/h2生成的页面的DOM结构如下所示可以看到表达式的值为false的时候元素不会渲染在页面中。
2.2 条件渲染分组
用法在 template 元素上使用 v-if 条件渲染分组。
注意template只能和v-if配合使用 不能和v-show配合
由于 v-if是一个指令所以必须将它添加到一个元素上。但是如果想切换多个元素呢此时可以把一个 template 元素当做不可见的包裹元素并在上面使用 v-if。最终的渲染结果将不包含 template 元素。如下代码所示
template v-ifn1h3V/h3h3U/h3h3E/h3
/template2.3 与 v-else-if、v-else 结合使用
v-if可以和v-else-if、 v-else 一起使用 但要求结构不能被打断即用该指令的结构要挨在一起。
div v-ifn1Angular/div
div v-else-ifn2React/div
div v-else-ifn3Vue/div
div v-else好好学习天天向上/div三、v-if vs v-show 一般来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。
因此如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好。 四、测试案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/vue.min.js/script
/head
bodydiv idrooth2当前的n值是{{n}}/h2button clickn点击n/button!-- 使用v-show做条件渲染 --h2 v-showfalse欢迎来到{{name}}/h2h2 v-show11欢迎来到{{name}}/h2!-- 使用v-if做条件渲染 --h2 v-iffalse欢迎来到{{name}}/h2h2 v-if11欢迎来到{{name}}/h2div v-shown1Angular/divdiv v-shown2React/divdiv v-shown3Vue/divdiv v-ifn1Angular(v-if)/divdiv v-else-ifn2React/divdiv v-else-ifn3Vue/divdiv v-else好好学习天天向上/div!-- v-if和template配合使用 --template v-ifn1h3V/h3h3U/h3h3E/h3/template/divscriptnew Vue({el:#root,data:{name:Vue,n:0},methods: {},})/script
/body
/html
