<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./vue.js"></script>
<body>
<div id="blog-post-demo">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:content="post.content"
></blog-post>
</div>
</body>
<script>
new Vue({
el:'#blog-post-demo',
data:{
posts:[
{id:1,title:'My journey with Vue1',content:'<span>js</span>'},
{id:2,title:'My journey with Vue2',content:'<span>js</span>'},
{id:31,title:'My journey with Vue3',content:'<span>js</span>'}
],
postFontSize: 1,
postFontSize1: 1,
postFontSize2: 1,
searchText:'',
searchText2:'',
searchTex:''
},
methods: {
onEnlargeText: function (enlargeAmount) {//这个值将会作为第一个参数传入这个方法:
this.postFontSize += enlargeAmount
}
}
})
</script>
</html>