SOURCE

Vue.component("article-context",{
  props:["detail"],
  template:`
		<div>
		<h3>{{detail.title}}</h3>
		<div><span>{{detail.time}}</span> <span v-show="detail.isoriginal">原创</span></div>
		<div v-html="detail.content"></div>
		</div>
	`
});
var vm = new Vue({
  el:"#app",
  data:{
    fSize:1,
    article:[
      {
        title:"3",
        time:"2018-07-03",
        isoriginal:true,
        content:"33333"
      },
      {
        title:"2",
        time:"2018-07-02",
        isoriginal:false,
        content:"22222"
      },{
        title:"1",
        time:"2018-07-01",
        isoriginal:true,
        content:"11111"
      }
    ]
  },
  methods:{
  	enlargeFont:function(){
      if(this.fSize <1.5){
        this.fSize += 0.1;
      }
		},
    narrowFont:function(){
    	if(this.fSize >0.5){
        this.fSize -= 0.1;
      }
    }
	}
});

<div id="app">
  <button @click="enlargeFont">+</button>
  <button @click="narrowFont">-</button>
  <div :style="{fontSize: fSize + 'em'}">
    <article-context :detail="item" v-for="item in article" ></article-context>
  </div>
</div>