一、绑定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}">测试样式1</div>
        <div v-bind:class='classStr'>测试样式2</div>
        <div v-bind:class='classArr'>测试样式3</div>
        <div v-bind:class="['active','error',{test:isTest}]">测试样式4</div>
    </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>

三、选择结构与循环结构

3.1 选择结构 v-if

注意:
因为v-show总是会渲染,而只是控制display为none还是显示 。
因此会造成不必要的资源浪费。
在这里插入图片描述

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

<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-show</div>
    <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>

效果“
在这里插入图片描述

3.1.2 实例:随机数大于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>

效果:
在这里插入图片描述

3.2 循环结构 v-for

在这里插入图片描述

3.2.1循环数组、对象数组

 <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>

效果:
在这里插入图片描述

3.3 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>

效果:
在这里插入图片描述

3.3.1 实例:输出未报到的学生

<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>

效果:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐