公司网站建设怎么计费,2021跨境电商最火的产品,番禺招聘网最新信息,建设者网站目录 一、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