Vue样式属性绑定

最新推荐文章于 2024-03-14 15:40:09 发布

黄宝康

最新推荐文章于 2024-03-14 15:40:09 发布

阅读量303

点赞数

分类专栏： VUE 文章标签： Vue样式属性绑定

本文链接：https://blog.csdn.net/huangbaokang/article/details/100700024

版权

VUE 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="gbk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE 练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      .red{
          color:red;
      }
      .blue{
          color:blue;
      }
      .font{
          font-size: 20px;
      }
    </style>
</head>
<body>
   <div id="app">
    <h2>class样式属性绑定</h2>
    <p v-bind:class="a">class样式属性绑定</p>
    <p :class="a">class样式属性绑定</p>
    <button @click="change">改变样式</button>
    <p :class="{red:isRed,font:isFont}">多样式对象(红色+20像素字体)</p>
   
    <h2>style内联样式</h2>
    <div v-bind:style="{color:color,fontSize:fontSize+'px'}">style内联样式绑定(蓝色，30像素字体)</div>
   </div>
<script>
     new Vue({
        el:'#app',
        data:{
           a:'red',
           isRed:true,
           isFont:true,
           color:'blue',
           fontSize:30
        },
        methods:{
          change(){
            console.log("change函数被调用");
            this.a=this.a=='red'?'blue':'red';
          }
        }
    });
</script>

</body>
</html>

浏览效果如下：
在这里插入图片描述