其原理,是利用vue里的computed计算属性来做。

请看代码:

<div id='app'>
<div v-text="newUsers"></div>
</div> new Vue({
el:'#app',
data:{
arrObj:{
name:"宋宇",
age:"1999",
sex:"??"
}
},
computed: {
newUsers: function () {
var that = this;
var user=that.arrObj;
return user.name+','+user.age+','+user.sex
}
}
})

所以说,vue真的很强大,很方便,就看脑洞有多大了。其实,换个姿势,我还可以来一遍。

vue之v-text渲染多值的更多相关文章

  1. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  2. Vue为何采用异步渲染

    Vue为何采用异步渲染 Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被推入到队列中一次 ...

  3. Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)

    文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...

  4. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  5. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  6. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

  7. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

  8. Vue组件v-if新渲染的组件不更新

    Vue组件v-if新渲染的组件不更新:可能原因是Vue识别到是相似组件(高度相似甚至相同)不会更新元素.给原来的组件和新组件分别给不同的key值让Vue识别为不同的组件.

  9. vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用)

    :key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗. 当前页面如果有列表渲染v-for,并且在v-for的循环标签中没有:key元素时,控制台会出 ...

  10. vue强制组件重新渲染

    有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让Vue以正确的方式重新呈现组件呢? 强制 Vue ...

随机推荐

  1. FreeRTOS - 任务使用注意

    如果使用xTaskCreate() 创建任务,任务栈使用的是FreeRTOS heap

  2. 二叉树系列 - 二叉树里的最长路径 例 [LeetCode] Binary Tree Maximum Path Sum

    题目: Binary Tree Maximum Path Sum Given a binary tree, find the maximum path sum. The path may start ...

  3. MongoDB入门(1)- MongoDB简介

    什么是MongoDB NoSQL NoSQL systems are also sometimes called "Not only SQL" to emphasize that ...

  4. IE8动态创建CSS

    IE8动态创建CSS 最近在项目中用到在页面中动态创建CSS方法,记录一下方便以后查看 一. 在IE下动态创建(网上收集3种方法,最后一个方法未测试成功,具体不知道什么原因) 第一种(此方法很麻烦,需 ...

  5. EntitySpace 常用语句

    EntitySpace 这个是很早期的ORM框架,最近发现这个破解的也都不能用了.有谁知道能用的,联系我. 1. where带几个条件的 query.Where(query.ProductTempSt ...

  6. Bzoj4870 [SXOI2017]组合数问题

    Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 155  Solved: 78 Description Input 第一行有四个整数 n, p, k, ...

  7. 【CODEVS】3546 矩阵链乘法

    [算法]区间DP [题解] 注意先输出右括号后输出左括号. f[i][i+x-1]=min(f[i][i+x-1],f[i][j]+f[j+1][i+x-1]+p[i]*p[j+1]*p[i+x]) ...

  8. 透彻理解Spring事务设计思想之手写实现(山东数漫江湖)

    前言 事务,是描述一组操作的抽象,比如对数据库的一组操作,要么全部成功,要么全部失败.事务具有4个特性:Atomicity(原子性),Consistency(一致性),Isolation(隔离性),D ...

  9. hdu 2680 Choose the best route (dijkstra算法 最短路问题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2680 Choose the best route Time Limit: 2000/1000 MS ( ...

  10. hdfs文件上传机制与namenode元数据管理机制

    1.hdfs文件上传机制 文件上传过程:   1.客户端想NameNode申请上传文件, 2.NameNode返回此次上传的分配DataNode情况给客户端 3.客户端开始依向dataName上传对应 ...