javascript - VueJS更改特定行的字体而不是所有行
问题描述
当前代码更改所有行与特定行的字体:
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/vue@2.6.10/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/vue@2.6.10/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/vue@2.6.10/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>
推荐阅读
- intercom - 对讲机如何使用 api 将应用程序包含在对话中
- python - 使用烧瓶 sqlalchemy.exc.IntegrityError 时出错:(sqlite3.IntegrityError) UNIQUE 约束失败
- c++ - 具有 nullptrs 或空缓冲区的 DirectX11 IASetVertexBuffers
- python - 使用 groupby 列从 Min 和 Max 列值计算 Pandas Dataframe 的变化率
- c++ - 未定义符号:SomeClass 的 vtable
- laravel - 使用 Route::resource 时更改默认 URL 参数名称
- python - 如何在pyqt4中的文本编辑小部件中显示所有输入的文本行编辑
- reactjs - 如何在材质 ui SVG ICON 中使用自定义 SVG 文件
- go - 转到〜(波浪号字符)目录路径
- ruby-on-rails - 在 Ruby on Rails 中发现错误(RAILS CONSOLE)