其原理,是利用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. Trades FZU - 2281 (大数+贪心)

    This is a very easy problem. ACMeow loves GTX1920. Now he has m RMB, but no GTX1920s. In the next n ...

  2. syslog大小限制

    位置 /etc/logrotate.d/rsyslog 相关配置信息察看man logrotate size k/M/G /var/log/syslog { rotate daily missingo ...

  3. stout代码分析之六:Stopwatch

    在进行性能测试时,经常需要计算某个函数执行的时长.stout中的Stopwatch类可实现纳秒精度的计时. Stopwatch内部使用timespec记录开始和技术时间.   timeval和time ...

  4. 求前n项正整数的倒数和

    求前n项正整数的倒数和 前n项正整数的和是一个发散的序列,学过高等数学的这个都知道.所以它没有一个精确的公式,但是近似的公式是有的: 1 + 1/2 + 1/3 + …… + 1/n ≍ ln n + ...

  5. JN5169 --------- zigbee代码

    队列: 需要创建3个标准队列(只创建不使用): ------Queue with handle zps_msgMlmeDcfmInd to receive IEEE 802.15.4 MACcomma ...

  6. iostat和iowait详细解说

    简单的说,sar -u看出来的cpu利用率iowait 不实用,iostat -x 中的 svctm   和util 参数 命令形式: iostat -x 1 每隔一秒输出下 其中的svctm参数代表 ...

  7. uva 1506 Largest Rectangle in a Histogram

    Largest Rectangle in a Histogram http://acm.hdu.edu.cn/showproblem.php?pid=1506 Time Limit: 2000/100 ...

  8. struts2常用标签之数据标签

    数据标签1  property标签  property标签的主要属性:  value:用来获取值的OGNL表达式,如果value属性值没有指定,那么将会被设定为top,也就是返回位于值栈最顶端的对象. ...

  9. bzoj 2440 容斥原理

    首先根据样例或者自己打表大概可以知道,对于询问k,答案不会超过k<<1,那么我们就可以二分答案,求当前二分的值内有多少个数不是完全平方数的倍数,这样就可以了,对于每个二分到的值x,其中完全 ...

  10. 常见网络命令之traceroute命令一起其他常用命令

    备注:任何命令+/?就可以显示命令帮助,比如:ipconfig /?. traceroute命令 traceroute是UNIX系统中的名字,用来跟踪一个分组从源点到终点的路径.在Windows系统中 ...