请问vue从后台拿到对象数据后，怎么渲染在相应标签里？

Question

这是我的template里的内容：

<template>
  <div>
    <h1>news_detail</h1>
    <!--页面主体-->
    <div class="main container">
      <div class="news_details"  >
            <h2>这里需要放 title</h2>
            <span>发布时间: pubTime</span>
            <div class="news_content">
              这里是 content
          </div>
      </div>
    </div>
  </div>
</template>

以下是我在后台拿数据：

 methods:{
        NewsCoutent:function(){
          this.$http.get('http://localhost/mfresh/data/news_detail.php?nid='+this.nid)
            .then((response)=>{
            this.newsContentList = response.data;
            console.log(response.data);
            console.log(this.newsContentList.title);
          })
        }
    },

第一个console.log在控制台的输出拿到的是对象：

1. {__ob__: Observer}
1. content:"<p>家居装饰也要“壕”一次，尤其是雾霾天气下家庭必备的空气净化器。近日净美仕在行业率先推出“千金”M8088A彩色版，可谓为空气净化器产业树立了个性化品牌的标杆。</p><img src="news_imgs/01.jpg" alt=""/>..."
2. nid:(...)
3. pubTime:"1575856000000"
4. title:"1智能空气净化器翻盘：净美仕能否领衔?"

第二个console.log取title，也没问题：

1智能空气净化器翻盘：净美仕能否领衔?

在template里渲染的时候我用的v-for只能取到所有，不能取出单个值：

v-for="n of newsContentList">   //用in 也试了，也不行。
//第一个取出了所有数据
console.log({{n}});
 //第二个拿不到数据，不能用 . 取吗？
console.log({{n.title}});

这个怎么渲染啊？？

Answer 1

response.data 数据可能不是json格式的，转换成json格式，再试试

Answer 2

给你 提供思路吧：先将拿到的对象挂在到虚拟节点中，也就是data中，然后通过差值表达式的方式再页面中进行循环便利等操作

Answer 3

默认data里面定义数据，然后取到后给赋值进去，用{{data}}解析