当前代码更改所有行和特定行的字体：
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post row">
<h3 class="cell"> {{ post.title }}</h3>
<button @click="$emit('enlarge-text')">Enlarge text</button>
<div v-html="post.content" class="cell"></div>
</div>
`,
});
new Vue({
el : '#blog-post-demo',
data : {
posts : [
{id: 1, title : 'My Journey to Africa', content : 'I am the post'},
{id: 2, title : 'My Journey to America', content : 'I am the post'},
{id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
{id: 4, title : 'My Journey to Asia', content : 'I am the post'},
],
postFontSize : 1,
}
});.row {
background-color: cyan;
}
.cell {
background-color: antiquewhite;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<div id="blog-post-demo">
<blog-post v-for="post in posts" :post="post" :key="post.id" :style="{fontSize : postFontSize + 'em'}" @enlarge-text="postFontSize += 0.1"></blog-post>
</div>我怎样才能操纵特定的一行，一行，更新一行的字体大小和所有行的字体大小？
尝试了以下操作，但没有成功：
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post row" :style="{fontSize : postFontSize + 'em'}" @enlarge-text="postFontSize += 0.1">
<h3 class="cell">{{ post.title }}</h3>
<button @click="$emit('enlarge-text')">Enlarge text</button>
<div v-html="post.content" class="cell"></div>
</div>
`,
});
new Vue({
el : '#blog-post-demo',
data : {
posts : [
{id: 1, title : 'My Journey to Africa', content : 'I am the post'},
{id: 2, title : 'My Journey to America', content : 'I am the post'},
{id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
{id: 4, title : 'My Journey to Asia', content : 'I am the post'},
],
postFontSize : 1,
}
}).row {
background-color: cyan;
}
.cell {
background-color: antiquewhite;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<div id="blog-post-demo">
<blog-post v-for="post in posts" :post="post" :key="post.id"></blog-post>
</div>最佳答案
如果只想更新1行，则postFontSize应该是blog-post组件的本地数据
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.row {
background-color: cyan;
}
.cell {
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="blog-post-demo">
<blog-post v-for="post in posts" :post="post" :key="post.id"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post row" :style="{fontSize : postFontSize + 'em'}">
<h3 class="cell"> {{ post.title }}</h3>
<button @click="postFontSize += 0.1">Enlarge text</button>
<div v-html="post.content" class="cell"></div>
</div>`,
data() {
return {
postFontSize : 1
}
}
})
new Vue({
el : '#blog-post-demo',
data : {
posts : [
{id: 1, title : 'My Journey to Africa', content : 'I am the post'},
{id: 2, title : 'My Journey to America', content : 'I am the post'},
{id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
{id: 4, title : 'My Journey to Asia', content : 'I am the post'},
]
}
})
</script>
</body>
</html>关于javascript - VueJS更改特定行的字体而不是所有行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56351719/