热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

uni-app,v-for时block和view的使用

uni-app,v-for时block和view的使用1<template>2<view>3<viewv-fo
uni-app,v-for时 block 和 view 的使用
 1 <template>
 2     <view>
 3         <view v-for="stuObj in studentArry">
 4             <view>姓名: {{ stuObj.name}} , 年龄: {{ stuObj.age}}view>
 5             <view>
 6                 擅长技能:
 7             
 9                 <view>
10                     
13                     
14                     
15                     <block v-for="sk in stuObj.skill">
16                         {{ sk }},
17                     block>
18                 view>
19             view>
20         view>
21     view>    
22 template>
23 
24 <script>
25     export default {
26         data() {
27             return {
28                 studentArry: [
29                     {
30                         name: '小明',
31                         age: 18,
32                         skill: ["", "", "rap"]
33                     },
34                     {
35                         name: '小红',
36                         age: 19,
37                         skill: [""]
38                     },
39                     {
40                         name: '小李',
41                         age: 17,
42                         skill: [""]
43                     },
44                     {
45                         name: '小莉',
46                         age: 18,
47                         skill: ["rap"]
48                     },
49                     {
50                         name: '小美',
51                         age: 18,
52                         skill: ["", "rap"]
53                     }
54                 ]
55             }
56         },
57         methods: {
58             
59         }
60     }
61 script>
62 
63 <style>
64 
65 style>

 

 使用view时的效果  

    自带换行的效果

 

使用block时的效果

   取消换行的效果


推荐阅读
  • 阿里“云开发“小程序(uniCould)
    博主ps:网上资料少的可怜,哎,腾讯云涨价了,论服务器,我肯定选的阿里,再着你们对比下unico ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • Vue 实现表格分页功能详解
    本文将详细介绍如何在 Vue 中实现表格的分页功能,包括代码示例和具体实现步骤,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • Webpack 初探:Import 和 Require 的使用
    本文介绍了 Webpack 中 Import 和 Require 的基本概念和使用方法,帮助读者更好地理解和应用模块化开发。 ... [详细]
  • 本文介绍了如何在 Vue 3 组合 API 中正确设置 setup() 函数的 TypeScript 类型,以避免隐式 any 类型的问题。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 为了在Hadoop 2.7.2中实现对Snappy压缩和解压功能的原生支持,本文详细介绍了如何重新编译Hadoop源代码,并优化其Native编译过程。通过这一优化,可以显著提升数据处理的效率和性能。此外,还探讨了编译过程中可能遇到的问题及其解决方案,为用户提供了一套完整的操作指南。 ... [详细]
  • 基于 Vue 和 Element UI 实现的简洁登录界面设计
    本文介绍了一种利用 Vue.js 和 Element UI 框架构建的简洁登录界面设计。该设计不仅注重用户体验,还确保了界面的美观性和易用性。通过合理的布局和组件配置,实现了高效、响应式的登录功能,适用于多种前端应用场景。 ... [详细]
  • Amoeba 通过优化 MySQL 的读写分离功能显著提升了数据库性能。作为一款基于 MySQL 协议的代理工具,Amoeba 能够高效地处理应用程序的请求,并根据预设的规则将 SQL 请求智能地分配到不同的数据库实例,从而实现负载均衡和高可用性。该方案不仅提高了系统的并发处理能力,还有效减少了主数据库的负担,确保了数据的一致性和可靠性。 ... [详细]
  • 本文详细介绍了在Linux系统上编译安装MySQL 5.5源码的步骤。首先,通过Yum安装必要的依赖软件包,如GCC、GCC-C++等,确保编译环境的完备。接着,下载并解压MySQL 5.5的源码包,配置编译选项,进行编译和安装。最后,完成安装后,进行基本的配置和启动测试,确保MySQL服务正常运行。 ... [详细]
  • 如何使用ES6语法编写Webpack配置文件? ... [详细]
  • 使用 Vuex 管理表单状态:当输入框失去焦点时自动恢复初始值 ... [详细]
  • 安卓ndk开发!高级Android晋升之View渲染机制,附答案
    缘起深圳市腾讯计算机系统有限公司成立于1998年11月,是中国最大的互联网综合服务提供商之一,也是中国服务用户最多的互联网企业之一。腾讯业务多元化& ... [详细]
  • 本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog,包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]
author-avatar
wjb201212
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有