Vue.js基础学习（三) -------------动态绑定v-bind的介绍和使用

最新推荐文章于 2024-03-05 10:52:18 发布

D-liang先生

最新推荐文章于 2024-03-05 10:52:18 发布

阅读量255

点赞数

分类专栏： vue.js学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_45352819/article/details/112005426

版权

vue.js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue.js基础学习（三) -------------动态绑定v-bind的介绍和使用

一、v-bind介绍

v-bind:需要动态决定标签的属性的时候可以使用到v-bind
语法糖的写法: : ,把v-bind替换为：

二、v-bind的基本使用

动态绑定a标签的href属性,动态绑定img的src属性

    <img :src='imgURL'  >
    <a :href="aHref">百度一下</a>
     aHref:'http://www.baidu.com',
     imgURL:'/img/=.jpg'

三、v-bind动态绑定class

  <style>
    .Color{
      color:green;
    }
    .acl{
      color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--<h2 :class="{类名1：Boolean,类名2:Booolean}">{{message}}</h2>--> 
    <h2 :class="{ Color:isColor,  Line:isLine}">{{message}}</h2> <!--对象语法-->
    <h2 :class="getcolores()">{{message}}</h2>
    <button @click='color'>更换</button>
  </div>
  <script src="/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'动态绑定class',
        isColor:true,
        isLine:true
      },
      methods: {
        color:function(){
          this.isColor =! this.isColor;
        },
        getcolores:function(){
          return{Color: this.isColor}
        }
      }
    })
  </script>
</body>

在绑定class的时候在类后面赋值一个Boolean值，这样可以决定它是否显示这个class属性

四、v-bind动态绑定style

body>
  <div id="app">
    <h3 :style="{fontSize:fonzise,color:Fcolor}">{{message}}</h3>
    <h3 :style="[fz,Fcolor]" >{{message}}</h3>
  </div>
  <script src="/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:'动态绑定style',
        fonzise:'100px',
        Fcolor:'red',
      },
    })
  </script>
</body>

在v-bind里绑定一个元素的style属性的时候，给style赋值一个对象，对象的名字是属性名，值是在vue实例的data里定义的，以方便动态的改变它的值

D-liang先生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue.js基础学习（三) -------------动态绑定v-bind的介绍和使用

Vue.js基础学习（三) -------------动态绑定v-bind的介绍和使用一、v-bind介绍v-bind:需要动态决定标签的属性的时候可以使用到v-bind语法糖的写法: : ,把v-bind替换为：二、v-bind的基本使用动态绑定a标签的href属性,动态绑定img的src属性 <img :src='imgURL' > <a :href="aHref">百度一下</a> aHref:'http://www.bai
复制链接

扫一扫