电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到如何在vue.js中使用一个变量控制元素的显示隐藏的问题，如果我们遇到了如何在vue.js中使用一...
电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到如何在vue.js中使用一个变量控制元素的显示隐藏的问题，如果我们遇到了如何在vue.js中使用一个变量控制元素的显示隐藏的情况，该怎么处理怎么才能解决如何在vue.js中使用一个变量控制元素的显示隐藏带来的困扰呢，对于这样的问题其实我们只需要Vue.jsHTML5HBuilder浏览器截图工具第一步，双击打开HBuilder编辑工具，新建一个HTML5模板页面，如下图所示：第二步，在页面中引入vue.js文件，并在
插入div标签还有p和span，如下图所示：第三步，在对应的p和span标签上使用v-show和v-if，绑定变量a和b，如下图所示：第四步，分别给a、b变量赋值true和false，然后保存代码并这样就解决了这样的问题，接下来给大家带来如何在vue.js中使用一个变量控制元素的显示隐藏的详细操作步骤。工具/原料
Vue.js
HTML5
HBuilder
浏览器
截图工具
方法/步骤
第一步，双击打开HBuilder编辑工具，新建一个HTML5模板页面，如下图所示：
第二步，在页面中引入vue.js文件，并在<body></body>插入div标签还有p和span，如下图所示：
第三步，在对应的p和span标签上使用v-show和v-if，绑定变量a和b，如下图所示：
第四步，分别给a、b变量赋值true和false，然后保存代码并在浏览器中预览，如下图所示：
第五步，将变量a和变量b的值进行切换，然后查看对应的效果，如下图所示：
第六步，保存代码再次预览发现span标签内的文字显示，这两个变量可以使用一个变量，然后对另一个取反，如下图所示：
注意事项
注意如何使用v-if和v-show控制元素显示和隐藏
注意如果通过单一变量控制多个元素显示隐藏
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
