Vue基础 - v-bind修改属性

最新推荐文章于 2025-07-16 06:49:22 发布

转载最新推荐文章于 2025-07-16 06:49:22 发布 · 750 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/clamp7724/p/11267583.html

文章标签：

#javascript #ViewUI

本文介绍如何在Vue.js中使用v-bind:class指令动态地为元素绑定类名，实现条件渲染样式。通过一个具体的示例展示了当数据属性use为true时，元素将应用class1类，反之则不应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}"> 
v-bind:class 指令
</div>
</div>

<script>
new Vue({
el: '#app',
data:{
use: false //这里赋值为false，所以没有调用class1
}
});
</script>

转载于:https://www.cnblogs.com/clamp7724/p/11267583.html