Vue初学03-v-bind

最新推荐文章于 2023-05-12 21:31:55 发布

置顶周达

最新推荐文章于 2023-05-12 21:31:55 发布

阅读量272

点赞数 2

分类专栏： vue 文章标签： v-bind 属性绑定 v-bind 绑定class v-bind 绑定style

本文链接：https://blog.csdn.net/gis_zhouda/article/details/104775946

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

v-bind用于动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-bind 绑定src、href

动态设置img的src，a的href需要通过v-bind指令，如果不使用v-bind指令，将无法解析变量的值。如下所示

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>

      <div id="app">
          <a v-bind:href="hrefurl">w3school</a>
          <img v-bind:src="imgurl"/>
      </div>

    <script>
         const vue = new Vue({
             el:"#app",
             data:{
                 message:"hello vue!",
                 hrefurl:"https://www.w3school.com.cn/",
                 imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583839778569&di=85691ea380fb3675fa451798ae7d3df4&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1032090787%2C3027113824%26fm%3D214%26gp%3D0.jpg"
             }
         });
    </script>
</body>
</html>

效果如下

v-bind绑定class

通过v-bind动态设置class，class的值可以是对象{classname1:boolean1,classname2:boolean2},也可以是数组[classname1,classname2]

对象比较常用，boolean为true或者false分别表示添加和移除该class

如下所示

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
        .red {
       color:red;
        }
        .fontsize {
            font-size:30px;
        }
    </style>
</head>
<body>

      <div id="app">
            <p v-bind:class="{red:isred,fontsize:isfontsize}">{{message}}</p>
      </div>

    <script>
         const vue = new Vue({
             el:"#app",
             data:{
                 message:"hello vue!",
                 isred:true,
                 isfontsize:true
             }
         });
    </script>
</body>
</html>

效果如下

如果绑定的class比较多，为了美观，可以通过调用方法绑定多个class，将对象通过方法返回，但是需要注意在方法里面访问变量需要加this,效果是一样的。如下所示

<div id="app">
            <p v-bind:class="getallclass()">{{message}}</p>
      </div>

    <script>
         const vue = new Vue({
             el:"#app",
             data:{
                 message:"hello vue!",
                 isred:true,
                 isfontsize:true
             },
             methods:{
                 getallclass:function()
                 {
                     return {red:this.isred,fontsize:this.isfontsize};
                 }
             }
         });
    </script>

v-bind绑定style

通过v-bind动态设置style，与class类似，style的值可以是对象{key1:value1,key2:value2},也可以是数组

对象比较常用，key和value分别对应属性和值

如下所示

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>

      <div id="app">
            <p v-bind:style="getallstyle()">{{message}}</p>
      </div>

    <script>
         const vue = new Vue({
             el:"#app",
             data:{
                 message:"hello vue!",
                 redcolor:'blue',
                 fontsize:50
             },
             methods:{
                 getallstyle:function()
                 {
                     return {color:this.redcolor,fontSize:this.fontsize+'px'};
                 }
             }
         });
    </script>
</body>
</html>

效果如下