7、Vue指令v-bind

最新推荐文章于 2022-10-25 19:38:33 发布

zjh的学习乐园

最新推荐文章于 2022-10-25 19:38:33 发布

阅读量217

点赞数 2

分类专栏： vue基础文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_46841213/article/details/115408824

版权

vue基础专栏收录该内容

25 篇文章 2 订阅

订阅专栏

Vue指令v-bind

1、v-bind的介绍及使用
2、动态绑定class
3、动态绑定style

1、v-bind的介绍及使用

作用：动态地绑定一个或多个属性，或者一个组件prop到表达式。
语法：在元素上添加v-bind:属性名=”常量||变量名”。
简写格式： :属性名=”变量名”。
举例1：

<div id="app">
        <a v-bind:href="uhref">
            <img :src="url">
        </a>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                uhref:"https://www.baidu.com",
                url:"https://www.baidu.com/img/PCpad_012830ebaa7e4379ce9a9ed1b71f7507.png"
            }
        })
    </script>

举例2：

<style>
        img{
            width: 50px;
            height: 30px;
        }
    </style>
  </head>
  <body>
    <div id="app">
        <ul>
            <li v-for="item in url">
                {{item}}
                <!-- <img :src="{{item}}"> -->
                <img :src="item">
            </li>
        </ul>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                url:[
                    "http://pic.87g.com/upload/2017/0421/20170421041557991.jpg",
                    "http://n.sinaimg.cn/games/20161109/iTmH-fxxneua4523465.jpg",
                    "http://i1.073img.com/131108/4343693_153504_1.jpg"
                ]
            }
        })
    </script>
  </body>

在这里插入图片描述
上面例子中，我们不能直接让v-bind:src的值为{{item}},而是让它的值直接为item，因为v-bind:src它不接收字符串，使用{{item}}的话，{{item}}输出的是字符串格式，而item是变量，是可以被接收的，因此这里最后使用的是item。

2、动态绑定class

v-bind动态绑定class:对象，使用数组来罗列多个绑定的类名。
举例：

<style>
       .red{
           color: red;
       }
       .italic{
           font-style: italic;
       }
    </style>
  </head>
  <body>
    <div id="app">
                <h2 :class="['red','italic']">加油</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{

            }
        })
    </script>

在这里插入图片描述
这里我们需要注意的是必须要创建一个Vue对象来和#app元素绑定，不然的话是无法使用v-bind来动态绑定class的。
还有一点需要知道的是，只有当我们绑定的类的值为true时，才会将该属性值添加到class里面，当为false时，则不会添加该属性值。

<style>
       .red{
           color: red;
       }
       .italic{
           font-style: italic;
       }
    </style>
  </head>
  <body>
    <div id="app">
                <h2 :class="['red','italic']">加油</h2>
                <h2 :class="['red',{'italic':bool}]">加油</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                bool:false
            }
        })
    </script>

在这里插入图片描述
举例：动态绑定class时，使用三元表达式来绑定类名

<div id="app">
                <h2 :class="['red','italic']">加油</h2>
                <h2 :class="['red',{'italic':bool}]">加油</h2>
                <h2 :class="[bool?'red' : 'italic']">加油</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                bool:false
            }
        })
    </script>

在这里插入图片描述
我们还可以使用对象的方式来添加class属性。

 <div id="app">
                <h2 :class="['red','italic']">加油</h2>
                <h2 :class="['red',{'italic':bool}]">加油</h2>
                <h2 :class="[bool?'red' : 'italic']">加油</h2>
                <h2 :class="classobj">加油</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                bool:false,
                classobj:{
                    red:true,
                    italic:true,
                }
            }
        })
    </script>

在这里插入图片描述

3、动态绑定style

在这里插入图片描述
举例1：动态绑定style

<div id="app">
        <h2 :style="{'color':'red'}">加油</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
            }
        })
    </script>

在这里插入图片描述
举例2：使用数组动态绑定style

<div id="app">
        <h2 :style="[sobj1,sobj2]">加油</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                sobj1:{
                    color:"red"
                },
                sobj2:{
                    // 注意一下，我们必须使用驼峰命名
                    fontSize:"50px"
                }
            }
        })

在这里插入图片描述

zjh的学习乐园

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
7、Vue指令v-bind

Vue指令v-bind1、v-bind的介绍及使用2、动态绑定class3、动态绑定style1、v-bind的介绍及使用作用：动态地绑定一个或多个属性，或者一个组件prop到表达式。语法：在元素上添加v-bind:属性名=”常量||变量名”。简写格式： :属性名=”变量名”。举例1：<div id="app"> <a v-bind:href="uhref"> <img :src="url"> <
复制链接

扫一扫