xcxd.net
当前位置:首页 >> 如何利用VuE.js库中的v%show显示和隐藏元素 >>

如何利用VuE.js库中的v%show显示和隐藏元素

主要你要理解v-if和v-show的区别,如果只在一个dom上操作,还是用v-show,他的原理的设置这个dom的display,对网页性能消耗小,如果在两个dom之间切换,用v-if,他是根据条件来判断是否加载dom.

Vue.js库中带有一些内部指令,有v-if、v-show、v-else、v-on等.其中,v-if是根据表达式的值判断一个元素是生成或移除,如果判断为true,就生成元素;否则,移除元素.下面利用一个实例说明v-if的用法,操作如下:工具/原料 Vue.js HBuilder

// vue 代码var app = new Vue({ el: '#app', data: { show: false }})模板代码 <div v-if="show">Yes</div>//只要show 的值 =true div就会显示,反之就会隐藏.

第一步,创建静态页面vtext.html,修改title显示的内容并引入vue.js,第二步,在body标签元素内插入两个span元素,在第一个span绑定v-text指令,第二个span中插入{{message}},第三步,编写js代码,绑定数据源message,第四步,预览静态页面vtext.html,发现{{message}}还是一样,未变成赋的值,第五步,在两个span外层添加一个div,并将第一个span的id赋给div,再在第一个span标签上绑定v-model,第六步,再次预览发现页面中的{{message}}变为绑定的数据源,

v-show是通过其值为true或者false来决定所包含的元素是否显示.举例如下:HTML: 123JavaScript(Vue):var vm = new Vue({ el: '#app', data: { ok: true }});默认情况下运行结果会在页面上显示这个p元素,也就是会出现123字符串.当我们在控制台中使用vm.ok=false;将其值设置为false后.123字符串将立即消失,即p元素被隐藏了.

在 Vue.js ,使用 v-if 指令判断元素显示<h1 v-if="ok">Yes</h1><!-- 当ok为true时,该元素显示,否则不显示-->在 <template> 中配合 v-if 条件渲染一整组因为 v-if 是一个指令,需要将它添加到一个元素上.但是如果想切换多个元素,此时可以

<div v-if="true">显示</div><div v-if="false">隐藏</div>

在 Vue.js ,使用 v-if 指令判断元素显示Yes 中配合 v-if 条件渲染一整组因为 v-if 是一个指令,需要将它添加到一个元素上.但是如果想切换多个元素,此时可以把一个 元素当做包装元素,并在上面使用 v-if.最终的渲染结果不会包含 元素. v-if

第一步,创建静态页面vtext.html,修改title显示的内容并引入vue.js,第二步,在body标签元素内插入两个span元素,在第一个span绑定v-text指令,第二个span中插入{{message}},第三步,编写JS代码,绑定数据源message,第四步,预览静态页面vtext.html,发现{{message}}还是一样,未变成赋的值,第五步,在两个span外层添加一个div,并将第一个span的id赋给div,再在第一个span标签上绑定v-model,第六步,再次预览发现页面中的{{message}}变为绑定的数据源,

<div v-if="true">显示</div><div v-if="false">隐藏</div>

相关文档
tongrenche.com | kcjf.net | jjdp.net | yydg.net | jjdp.net | 网站首页 | 网站地图
All rights reserved Powered by www.xcxd.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com