vue学习-1

最新推荐文章于 2024-08-07 10:28:58 发布

ლ(°◕‵ƹ′◕ლ)

最新推荐文章于 2024-08-07 10:28:58 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/qq_37361400/article/details/97181694

版权

v-bind:class(:class)在绑定是一定要:class=" 'css类名 ' "这种写法，为了区分这是一个变量而不是一个class类名，不然会无效。可以有多种class合并，:class = "[‘变量名‘,’变量名‘]"这种形式，可以在[]中写三元表达式。还有一种对象写法:class="{div1:true,div2:false}",true代表出发，fasle则不出发。可以把键的值换成vue的data变量属性，在:class = "'css类名'"这个写法中也可以:class = "vue变量名"，在vue的data中声明class的{}对象。

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>src来自菜鸟</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
   .div1{
       color:red;
   }
   .div2{
       font-size:30px;
   }
</style>
</head>
<body>
<div id="app" >
   <h1 :class="['div1',flag?'':'div2']">{{msg}}</h1>
</div>