vue之v-bind

最新推荐文章于 2024-05-10 18:15:56 发布

IT行星

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量494

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_72694993/article/details/126719071

版权

一、v-bind基础使用

1.我们通过v-bind指令进行动态绑定，如下代码进行动态绑定class，当点击的时候把a赋值给class

 <div id="app">
        <button @click="fn()"></button>
   <div v-bind:class="class1">123</div>         

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             class1:'',
             class2:'',
            },
            methods: {
                fn(){
                    this.class1='a';
                    this.class2='a';
                }
            },
        });
    </script>

2.v-bind:class可以简写为：class即可以把(v-bind:class='class1')简写为(:class='class1')

3.v-bind不仅仅只能绑定class，可以绑定很多属性

二、v-bind的其他用法

1.可以通过key值的方式来决定样式是否执行，通过data中的数据的值u来决定是否执行样式，例如如下代码中isa为true所以class1的样式会执行，isb为false所以class2的样式不会执行

<body>
    <div id="app">
        <button @click="fn()"></button>
        <div v-bind:class="{class1:isa,class2:isb}">123</div>         
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             class1:'',
             class2:'',
             isa:true,
             isb:false
            },
            methods: {
                fn(){
                    this.class1='a';
                    this.class2='a';
                }
            },
        });
    </script>

2.通过数组进行绑定，当我们绑定多个样式的时候也可以通过数组进行绑定，如以下代码就用数组的方式把样式绑定给标签

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <button @click="fn()"></button>
        <div v-bind:class="[classa,classb]">123</div>         
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             class1:'',
             class2:'',
             classa:"yangshi1",
             classb:"yangshi2",
             isa:123,
             isb:false
            },
            methods: {
                fn(){
                    this.class1='a';
                    this.class2='a';
                }
            },
        });
    </script>

3.还可以给样式直接绑定其数值，如下代码直接给style绑定了数值,此标签高为500px 宽200px，值得注意的是这个方法也是通过绑定对象的方式进行绑定

  <div id="app">
        <button @click="fn()"></button>
        <div :style="{width:mywidth,height:myheight}">123</div>         
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             class1:'',
             class2:'',
             classa:"yangshi1",
             classb:"yangshi2",
             isa:123,
             isb:false,
             myheight:"500px",
             mywidth:"200px"
            },
            methods: {
                fn(){
                    this.class1='a';
                    this.class2='a';
                }
            },
        });
    </script>

IT行星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之v-bind

1.可以通过key值的方式来决定样式是否执行，通过data中的数据的值u来决定是否执行样式，例如如下代码中isa为true所以class1的样式会执行，isb为false所以class2的样式不会执行。3.还可以给样式直接绑定其数值，如下代码直接给style绑定了数值,此标签高为500px 宽200px，值得注意的是这个方法也是通过绑定对象的方式进行绑定。2.通过数组进行绑定，当我们绑定多个样式的时候也可以通过数组进行绑定，如以下代码就用数组的方式把样式绑定给标签。二、v-bind的其他用法。
复制链接

扫一扫

vue之v-bind

“相关推荐”对你有帮助么？