Vue之v-for、v-show使用举例
Vue for 举例 show 使用
2023-09-11 14:19:56 时间
demo.html
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml" 3 xmlns:v-on="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Vue Demo</title> 7 <!--自选版本--> 8 <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>--> 9 <!-- 开发环境版本,包含了有帮助的命令行警告 --> 10 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11 <!-- 生产环境版本,优化了尺寸和速度 --> 12 <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> 13 </head> 14 <body> 15 <div id="app"> 16 <div> 17 <h2>v-if、v-show举例说明</h2> 18 <div> 19 <h3>v-if 示例</h3> 20 <div> 21 <button v-on:click="error=!error">网络错误</button> 22 <button v-on:click="success=!success">网络正常</button> 23 <p v-if="error">网络错误:404</p> 24 <!--if条件满足,else条件不会显示--> 25 <p v-else-if="success">网络正常:200</p> 26 <!--if和else都不满足时显示--> 27 <p v-else>未知</p> 28 </div> 29 </div> 30 <hr> 31 <div> 32 <h3>v-show 示例</h3> 33 <!--与if不同的是元素始终存在,只是是否展现--> 34 <div> 35 <button v-on:click="error=!error">网络错误</button> 36 <button v-on:click="success=!success">网络正常</button> 37 <p v-show="error">网络错误:404</p> 38 <p v-show="success">网络正常:200</p> 39 </div> 40 </div> 41 </div> 42 </div> 43 <script src="app.js"></script> 44 45 </body> 46 </html>
app.js
var app = new Vue({ el: '#app', data: { error: false, success: false, }, methods: {}, computed: {} })
截图:
相关文章
- vue中使用viewerjs
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue之单表输入绑定
- 轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
- vue-cli内部webpack的打包优化
- [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript
- vue watch的this 到底是什么?
- vue框架-基础6-vue-调用后端接口,axios使用,跨域问题
- [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript
- [Vue @Component] Pass Vue Render Functions as Props for Powerful Patterns
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- vue.js3: 图片的反色/灰度(黑白)/褐色并保存(vue@3.2.37)
- ubuntu21.04(linux):安装node(14.17.1)和vue.js3.1环境
- centos7 minimal运行vue项目npm run serve时报错:Error: spawn xdg-open ENOENT --解决办法:yum install xdg-utils
- npm install时报平台不兼容Unsupported platform for xxx的解决办法:npm install -f强制安装(centos7下安装vite2 vue依赖时出现这个问题)
- vue v-for打印九九乘法表
- vue v-for遍历对象示例
- Vue入门教程:node安装vue命令行工具及启动项目
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue中template的作用及使用
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 一分钟理清Vue-cli 代码构建步骤。
- vue中axios的深入使用
- 038:vue+openlayers导出 image 形式地图(示例代码)
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue.js 循环语句
- Vue学习笔记——vue-router
- Vue学习笔记——Vue组件化编程