<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue标签内循环数据逗号分隔</title>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<template>
<span v-for="(item,index) in nameData">
{{ index == nameData.length-1 && item.name || (item.name + ',') }}
</span>
</template>
</div> <script>
var Main = {
data() {
return {
nameData: [
{
name: '张三'
},
{
name: '李四'
},
{
name: '王五'
},
{
name: '赵六'
}
]
};
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body> </html>

vue标签内循环数据逗号分隔的更多相关文章

  1. 23-python用BeautifulSoup用抓取a标签内所有数据

    1.获取子标签: thr_msgs = soup.find_all('div',class_=re.compile('msg'))   for i in thr_msgs:     print(i) ...

  2. python3用BeautifulSoup用字典的方法抓取a标签内的数据

    # -*- coding:utf-8 -*- #python 2.7 #XiaoDeng #http://tieba.baidu.com/p/2460150866 #标签操作 from bs4 imp ...

  3. Vue 目录结构 绑定数据 绑定属性 循环渲染数据

    一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...

  4. *.vue文件的template标签内使用form标签

    由于form表单有重复提交的问题,所以在vue文件内直接使用form标签时需要注意这个问题,否则会导致页面重复刷新跳转不成功的问题 解决方案: <form @submit.prevent> ...

  5. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  6. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  7. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  8. Vue(四) 内置指令

    现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...

  9. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

随机推荐

  1. 第06组 Alpha冲刺(4/6)

    队名:拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长:宋奕 过去两天完成了哪些任务 主要完成了用户联系模块的接口设计 完善后端的信息处理 GitHub签入记录 接下来的计划 ...

  2. CentOS 7 安装 MySql8.0

    1-配置 Yum 库 rpm -Uvh https://repo.mysql.com/mysql80-community-release-el7-3.noarch.rpm 2-安装 MySql 2.1 ...

  3. vs2015编译OBS-Studio

    编译之前的准备: 系统win10 QT5.7.0 VS2015 CMake 3.13.4 obs vs2015环境依赖包:dependencies2015 obs-studio 24.0 ====== ...

  4. SQL优化:一些简单的又实用的SQL优化方案【转】

    面试过程中,面试官有极高的频率会问道数据库的优化,SQL语句的优化,网上关于SQL优化的教程很多,但是鱼目混杂,显得有些杂乱不堪.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请 ...

  5. Calcite分析 - Rule

    Calcite源码分析,参考: http://matt33.com/2019/03/07/apache-calcite-process-flow/ https://matt33.com/2019/03 ...

  6. Nginx访问路径添加密码保护

    创建口令文件 用openssl命令创建口令 openssl passwd -apr1 会产生一个hash口令, 然后和用户名一起, 以[用户名]:[hash口令]的格式写入文本文件即可 例如创建一个名 ...

  7. tmp 字典合并

    tmp  

  8. EF6中的SQL监控

    在MVC或WEBAPI中的监控 System.Action<string> action = (string message) => { Debug.WriteLine(messag ...

  9. spring_boot实战日记(二)logback的使用和配置

    日志:描述系统运行状态的所有信息都是日志. 日志能力: 1.定制输出目标. 2.定制输出格式. 3.携带上下文信息 4.运行时选择输出. 5.灵活的配置 日志选择: 日志门面:JCL(和Logback ...

  10. 多生产者多消费者(第二种方式2.1)基于BlockingQueue

    public class Producer implements Runnable { //静态变量只初始化一次 private static AtomicInteger count = new At ...