Vue.js基礎學習（三) -------------動態繫結v-bind的介紹和使用

D-liang先生發表於2020-12-31
Vue.js

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裡定義的，以方便動態的改變它的值

相關文章