<!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. 第10组 Alpha冲刺（4/6）

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 学习调用中国天气网API,接近实现天气推送功能 对天气推送的形式进行讨论及重确 ...

  2. Java-JUC（十三）：现在有两个线程同时操作一个整数I，做自增操作，如何实现I的线程安全性？

    问题分析:正如i在多线程中如果想实现i的多线程操作,必须i要使用volitle来保证其内存可见性,但是i++自增操作不具备原子性操作,因此需要对i++这段代码确保其原子性操作即可. 方案1: 使用Re ...

  3. 转载:Base64编解码介绍

    https://www.liaoxuefeng.com/wiki/897692888725344/949441536192576 Base64是一种用64个字符来表示任意二进制数据的方法. 用记事本打 ...

  4. chrome浏览器postman 插件安装

    postman 软件功能 模拟各种HTTPrequests 从常用的GET.POST到RESTful的PUT.DELETE…等等.甚至还可以发送文件.送出额外的header. Collection功能 ...

  5. 【翻译】Flink Table Api & SQL — SQL

    本文翻译自官网:SQL https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/sql.html Flink Tab ...

  6. EasyNVR智能云终端硬件盒子x86版自我维护之摄像机网页直播系统基础运维

    背景分析 随着EasyNVR软件为越来越多的用户接受和使用,我们也致力于用户的需求收集和需求的调研,发现一部分用户有关于硬件设备的需求,加之我们推出的免费产品EasyNVS云管理平台,可以说用户自己搭 ...

  7. Graphviz(01) notepad++ Run xxx.gv

    1.新建文件dot.bat 放到 d:\,内容如下: set gvname=%% @echo '"d:\dot.bat" "$(FULL_CURRENT_PATH)&qu ...

  8. MAX10 ADC的一些基知识

    MAX10 ADC 的一些知识 1.        MAX 10 内部集成的12bit SAR ADC的特点为: a.        采样速率高达1Mhz. b.        模拟通道多达18个,单 ...

  9. Qt编译理解（Qt 对 C++ 的扩展主要是3个方面）

    沉沉的黑夜都是白天的前奏.--郭小川 舍弃IDE或qmake.cmake等工具的束缚,通过几个例子, 一步步从标准 C++ 的编译过渡到 Qt 的编译. Qt 对 C++ 的扩展主要是3个方面: 1) ...

  10. TCP/IP学习笔记12-- IP协议基础

    IP(internet protocol, 网际协议) IP相当于OSI参考模型中的第三层 -- 网络层. --网络层的下一层--数据链路层的主要作用是在 同一种数据链路 的节点之间进行包传递,而一旦 ...