SOURCE

Vue.component("blog-set", {
	props: ["blog"],
	data: function(){
		return {
			fontSize: 1,
			fixedNum: 1,
		}
	},
	template: `
		<div>
			<h1>{{blog.title}}</h1>
			<h2>{{fixedNum}}em</h2>
			<div>
				<ul>
					<li v-for="bc in blog.content">{{bc.id}} + {{bc.posts}}</li>
				</ul>
			</div>
			<button v-on:click="largeFontSize">+ size</button>
		</div>
	`,
	methods: {
		largeFontSize: function(event){
			console.log(event.target);
			this.fontSize += 0.1;
			//保留1位精度
			this.fixedNum = this.fontSize.toFixed(1);
			this.$emit("large");
		},
	},
});

new Vue({
	el: "#app",
	data: {
		//
		post: "点击按钮后，这段文字会放大",
		fontSize: 1,
		styleObject: {
			fontSize: 1,
		},
		blog: {
			title: "blog title",
			content: [
				{id: 1, posts: "1st"},
				{id: 2, posts: "2st"},
				{id: 3, posts: "3st"}
			],
		},
	},
	methods: {
		//
		largeFont: function(){
			this.fontSize += 0.1;
		},
	},
});

<div id="app">
	<p v-bind:style="{fontSize: fontSize + 'em'}">{{post}}</p>
	<blog-set v-bind:blog="blog" v-on:large="largeFont"></blog-set>
</div>

body{color: #fff;}
h1{color: #f00;}
h2{color: #0f0;}
button{padding: 10px 20px; display: inline-block;}
p{color: #ff0;}