vue.js学习（7）样式绑定

最新推荐文章于 2023-03-20 16:27:04 发布

code_AC

最新推荐文章于 2023-03-20 16:27:04 发布

阅读量344

点赞数

分类专栏： vue.js 文章标签： vue.js mvvm

本文链接：https://blog.csdn.net/code_AC/article/details/82797894

版权

vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue.js学习——样式绑定

这里主要是使用v-bind标签
直接贴代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  <style>
  .active{
    width:100px;
    height:100px;
    background:blue;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class="{active:isactive}"></div>
  </div>
  <p id="info">
<script type="text/javascript">
  var vm = new Vue({
  el: '#app',
  data: {
    isactive:true
  },
});
  </script>
</body>
</html>

运行结果如下：
在这里插入图片描述
下面对代码进行解释：

   <div v-bind:class="{active:isactive}"></div>

这里的active表示style里面的.active样式，isactive为它的属性值

   isactive:true

在这里将active的属性值标为true，则表示显示此样式

拓展1 样式覆盖

若将上述代码进行修改后如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  <style>
  .active{
    width:100px;
    height:100px;
    background:blue;
  }
  .end{
    background: red;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class="{active:isactive, 'end':end1}"></div>
  </div>
  <p id="info">
<script type="text/javascript">
  var vm = new Vue({
  el: '#app',
  data: {
    isactive:true,
    end1:true
  },
});
  </script>
</body>
</html>

则显示结果如下所示：
在这里插入图片描述
这是由于end类背景颜色覆盖掉了active类的颜色，同理，可以加第三个style来覆盖end类

拓展2 使用对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>
</body>
</html>

运行结果和上述相同
在这里将v-bind的class归为一个对象，然后在对象中进行样式的开关

code_AC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习（7）样式绑定

vue.js学习——样式绑定这里主要是使用v-bind标签直接贴代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"&gt;&lt;/scr
复制链接

扫一扫

专栏目录