vue.js 属性绑定的几种方式（以class属性为例）

zslsir

于 2022-10-07 06:00:50 发布

阅读量371

点赞数

分类专栏： vueJs 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zslsir/article/details/127190312

版权

vueJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 属性绑定测试实例(runoob.com)</title>
</head>
<style>
.myClass{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
<label for="r1">修改背景和颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'myClass': use}">
v-bind:class 指令
</div>
   <div v-bind:class="xx">
v-bind:class 指令
</div>
<div v-bind:class="use? xx:'ok'">
v-bind:class 指令
</div>
</div>

<script>
new Vue({
el: '#app',
data:{
use: false,
   xx:"myClass"
}
});
</script>
</body>