vue :class 动态绑定样式_Vue绑定Class与绑定Style、分支结构和循环结构

最新推荐文章于 2023-02-23 11:28:58 发布

weixin_39722196

最新推荐文章于 2023-02-23 11:28:58 发布

阅读量135

点赞数

作者：疯狂的地球人

https://blog.csdn.net/weixin_43742708/article/details/106658244

绑定Class

<style>   .active{        border: 1px solid red;        width: 100px;        height: 100px;    }    .error{        background-color: orange;    }    .test{font-size:76px;}style><body>    <div id="app">        <div v-bind:class="{active:isActive,error: isError}">测试样式1div>        <div v-bind:class='classStr'>测试样式2div>        <div v-bind:class='classArr'>测试样式3div>        <div v-bind:class="['active','error'，{test:isTest}]">测试样式4div>    div>    <script src="vue.js">script>    <script>        let vm = new Vue({            el:"#app",            data:{                // 1                isActive:'true',                isError:'true',                // 2                classStr:'active error',                // 3                classArr:['active','error'],                //4数组里边可以直接绑定class                isTest:'false',            },        });script>body>

效果：

绑定Style

<div id="app">    <div v-bind:style='{border:borderStyle,width:widthStyle,height:heightStyle}'>div>    <div :style='{"color":"red","font-size":"30px"}'>对象语法div>    <div :style='objStyles'>div>    <div :style='[objStyles,overrideStyles]'>div>div><script>    let vm = new Vue({        el:"#app",        data:{        //1            borderStyle:'1px solid blue',            widthStyle:'100px',            heightStyle:'200px',            //2            objStyles:{                border:'1px solid green',                width:'200px',                height:'100px'            },            //3            overrideStyles:{                border:'5px solid orange',                backgroundColor:'blue',            }        }    }); script>

选择结构与循环结构

选择结构 v-if

注意：
因为v-show总是会渲染，而只是控制display为none还是显示。
因此会造成不必要的资源浪费。

实例：根据成绩显示对应评语

<div id="app">    <div v-if='score>=90'>优秀div>    <div v-else-if='score<90 && score>=80'>良好div>    <div v-else-if='score<80 && score>=60'>一般div>    <div v-else>比较差div>    <div v-show='flag'>测试v-showdiv>    <button v-on:click='handle'>点击button>div><script src="vue.js">script><script>    let vm = new Vue({        el:"#app",        data:{            score:50,            flag:false        },        methods:{            handle:function(){                this.flag = !this.flag            }        }    });script>

效果：

实例：随机数大于0.5显示

<div id="app">    <h2 v-text='value'>h2>    <p v-if='value>0.5'>显示的p>    <p v-else>隐藏的p>div><script src="vue.js">script><script>    let vm = new Vue({        el:"#app",        data:{            value:Math.random()        }    });script>

效果：

循环结构 v-for

循环数组、对象数组

 <div id="app">     <div>水果列表div>     <ul>            <p>循环数组p>         <li v-for='item in fruits'>{{item}}li>         <p>循环数组并且输出索引p>         <li v-for='(item,index) in fruits'>{{item + '---' + index}}li>         <p>循环对象数组p>         <li :key='item.id' v-for='(item,index) in myFruits'>             <span>index：{{index}}span>             <span>---span>             <span>ename：{{item.ename}}span>             <span>---span>             <span>cname：{{item.cname}}span>         li>     ul> div> <script>     let vm = new Vue({         el:"#app",         data:{             fruits:['apple','orange','banana'],             // 注意：这是对象数组             myFruits:[{                 id:1,                 ename:'apple',                 cname:'苹果'             },{                 id:2,                 ename:'orange',                 cname:'橘子'             },{                 id:3,                 ename:'banana',                 cname:'香蕉'             }]         }     });script>

效果：

v-if和v-for结合使用

<div id="app">    <div v-if='v==13' v-for='(v,k,i) in obj'>{{v+'------'+k+'------'+i}}div>div><script>    let vm =new Vue({        el:"#app",        data:{            obj:{                uname:'zhangsan',                age:'13',                gender:'female'            }        }    });script>

效果：

实例：输出未报到的学生

<div id="app">    <strong>没有报道的学生名单:strong>    <ul>                   <li v-if='value.state == "" ' v-for='(value,key) in studentArrObj'>            <span>{{value.name}}span>        li>                <br>        <li v-if='value[1] == "" ' v-for='(value,key) in studentArr'>            <span>{{value[0]}}span>        li>    ul>div><script>    let vm = new Vue({        el:"#app",        data:{            studentArr:[['小明',''],['小红','已报到'],['小华','已报到'],['小思','']],            studentArrObj:[{                name:'小明',                state:''            },{                name:'小红',                state:'已报到'            },{                name:'小华',                state:'已报到'            },{                name:'小思',                state:''            }],        }    })script>

效果：

更多前端分享，请关注：

前端路人甲

weixin_39722196

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue :class 动态绑定样式_Vue绑定Class与绑定Style、分支结构和循环结构

作者：疯狂的地球人https://blog.csdn.net/weixin_43742708/article/details/106658244绑定Class<style> .active{ border: 1px solid red; width: 100px; height: 100px; } .error{ ...
复制链接

扫一扫