vue的某元素在不同条件下采用不同的样式

向右看齐 2021-11-22 11:28 669阅读 0赞

html页面

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>测试</title>
        <style>
          .static{
            color: aquamarine
          }
          .red{
            color: red
          }
          .blue{
            color:blue
          }
        </style>
        <script type="text/javascript"  src="js/vue.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        
      </head>
      <body>
        <div id='app'>
          <div class="static" v-bind:class = "{'red':flag1,'blue':flag2}">你好啊</div>
        </div>
      </body>
    
    </html>

js代码

window.onload = function(){
        var dataList = {
            name:'Coco',
            age:20,
            display:true,
            flag1:false,
            flag2:true,
           
            
        };
        var vm =new Vue({
            el:'#app',
            data:dataList
        });
     
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，669人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在 Java 中过滤不同的元素

> 仅过滤 Collection 中的唯一元素扫码关注《Java学研大本营》，加入读者群，分享更多精彩 ![bd696f5e99cc9118efc3499ee6b0290

矫情吗；*/ 2023年09月28日 22:13/ 0 赞/ 5 阅读

相关 vue 不同条件展示不同页面_减速机的润滑也有自己的条件，对于不同的减速机润滑的条件也是不同的...

![30de2ce90be2cc60c61cd76a30a9fcdc.png][] 齿轮传动是机械传动的一种重要形式。传动方式有多种多样，比较常用的有：机械传动、气体压缩传动

╰半橙微兮°/ 2023年01月03日 04:59/ 0 赞/ 194 阅读

相关 mybatis 不同条件拼接不同sql

> <table> > <tbody> > <tr> > <td><strong>Mybatis总结2020</strong></td> > <td>

柔情只为你懂/ 2022年12月13日 14:25/ 0 赞/ 258 阅读

相关在js中动态不同条件引入不同的css样式文件封装方法

js中动态不同的css样式文件的封装方法封装方法代码实现封装方法 function loadStyles(url) {

Bertha 。/ 2022年09月04日 11:50/ 0 赞/ 208 阅读

相关如何在不同条件下选择性地关闭dialog

最近在做个小项目，其中有涉及到dialog的按钮的事件处理，情形是这样的：在按钮的监听器中，我希望做一个if else 判断，如果条件符合，就关闭对话框，如果条件不符合，就

系统管理员/ 2022年06月17日 22:20/ 0 赞/ 213 阅读

相关 jstl分类讨论（不同条件下显示不同的列表）

秘笈心法：使用<c:choose>、<c:when>和<c:otherwise>标签时，必须遵循一下的语法规则： 1、<c:when>和<c:ot

超、凢脫俗/ 2022年06月17日 10:50/ 0 赞/ 257 阅读

相关 vue——如何给v-for循环出来的元素设置不同的样式

vue——如何给v-for循环出来的元素设置不同的样式 <template> <div> <div v-for="(i,a) in serve" class="s

柔情只为你懂/ 2022年01月25日 22:43/ 0 赞/ 1467 阅读

相关 vue的某元素在不同条件下采用不同的样式

html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

向右看齐/ 2021年11月22日 11:28/ 0 赞/ 670 阅读

相关 vue 不同的条件添加不同的类

<el-button v-for="(item,index) in mTod" :key="index" :class="[{'rmb':index === 0},

朱雀/ 2021年11月04日 13:40/ 0 赞/ 403 阅读

相关 js 根据不同条件引入不同的js 文件

var lanuage=sessionStorage.getItem("sysManager_i18nLanauge"); if(lan

浅浅的花香味﹌/ 2021年10月08日 07:42/ 0 赞/ 1031 阅读