Vue中class和style的样式处理，以及v-if和v-for的用法

最新推荐文章于 2023-04-09 21:26:18 发布

Lovely-Zhang-1026

最新推荐文章于 2023-04-09 21:26:18 发布

阅读量1.7k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_57508774/article/details/124005448

版权

本文详细讲解了如何在Vue中使用class和style属性的动态绑定，通过对象和数组语法实现元素样式的切换，包括v-bind:class和v-bind:style的实例演示，适合初学者理解动态绑定原理。

摘要由CSDN通过智能技术生成

class中的对象和数组语法

style中的对象和数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <style type="text/css">
        .active{
            border: 3px solid red;
            width: 200px;
            height: 200px;
        }
        .error{
            background-color: aqua;
        }
    </style>


</head>
<body>
    
     <!-- 引入vue.js -->
     <script src="js/vue.js" type="text/javascript"></script>

     <div id="app">

        <!-- class样式处理 -->
        <!-- 对象语法 -->
        <div v-bind:class="{active:isactive, error:iserror}">
            测试内容1
        </div>
        <button v-on:click="handle">切换1</button>

        <!-- 数组语法 -->
        <div v-bind:class="[activeClass, errorClass]">
            测试内容2
        </div>
        <button v-on:click="handle1">切换2</button>


        <!-- style样式语法 -->
        <div v-bind:style="{color:'red',border:'3px solid', width:'200px', height:'200px'}">
            测试内容3
        </div>
        <button v-on:click="handle2">切换3</button>

        <!-- 对象语法 -->
        <div v-bind:style="{color:colorstyle,border:borderstyle}">
            测试内容4
        </div>
        <button v-on:click="handle2">切换4</button>



        <!-- 数组语法 -->
        <div v-bind:style="[widthstyle, heightstyle]">
            测试内容5
        </div>
        <button v-on:click="handle3">切换5</button>


     </div>
     



     <script type="text/javascript">
         new Vue({
             el:"#app",
             data:{
                isactive:true,
                iserror:true,

                activeClass:'active',
                errorClass:'error',

                colorstyle:"blue",
                borderstyle:"3px solid green",

                widthstyle:{
                    width:"300px",
                    border:"3px solid red",
                    background:"yellow"
                },
                heightstyle:{
                    height:"400px"
                }
             },

             methods: {
                 handle:function(){
                     this.isactive =! this.isactive;
                     this.iserror =! this.iserror; 
                 },
                 handle1:function(){
                     this.activeClass ="";
                    //  this.errorClass =""; 
                 },
                 handle2:function(){

                 },
                 handle3:function(){
                     //点击将高度切换为100px
                     this.heightstyle.height="100px";
                 }
             }

         })
     </script>



</body>
</html>

v-if v-else-if v-else

v-show

v-for

v-if v-for的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 引入vue.js -->
    <script src="js/vue.js" type="text/javascript"></script>

    <div id="app">

        <!-- v-if v-else-if v-else不成立不会渲染 -->
        <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="score<60">差</div>

        
        <!-- v-show 不成立渲染但是不展示到页面 相当于隐藏 -->
        <div v-show="flag">测试</div>
        <button v-on:click="handle">切换</button>

        <ul>
            <!-- 遍历对象item的值 可以任意取 -->
            <li v-for="item in fruit">{{ item }}</li><br>

            <!-- index下角标 遍历数组-->
            <li v-for="(item,index) in fruit">{{ item+"---"+index }}</li><br>

            <!-- :key可以提高vue的性能 遍历对象的具体内容-->
            <li :key="item.id" v-for="(item,index) in myfruit">
                <span>{{ item.ename }}</span>
                <span>{{ item.cname }}</span>
                <span>{{ index }}</span>
            </li><br>

            <!-- 遍历对象 v值 k键 i下角标(都可以自定义) 可以加v-if进行筛选-->
            <li v-for="(value, key, index) in obj">{{ value+"----"+key+"----"+index }}</li><br>
            
            <!-- 遍历对象 v值为20 k键 i下角标(都可以自定义)-->
            <li v-if="value==20" v-for="(value, key, index) in obj">{{ value+"----"+key+"----"+index }}</li>

        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                score:20,
                flag:false,
                fruit:["apple","orange","banana"],
                myfruit:[{
                    id:"1",
                    ename:"apple",
                    cname:"苹果"
                },{
                    id:"2",
                    ename:"orange",
                    cname:"橘子"
                },{
                    id:"3",
                    ename:"banana",
                    cname:"香蕉"
                }],
                obj:{
                    name:'zhf',
                    age:'20',
                    sex:"男"
                }
            },

            methods: {
                handle:function(){
                    this.flag =! this.flag;
                }
            }
        })
    </script>

</body>
</html>

Lovely-Zhang-1026

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中class和style的样式处理，以及v-if和v-for的用法

class中的对象和数组语法style中的对象和数组语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0.
复制链接

扫一扫