vue學習筆記（一）---- vue指令（ v-bind 屬性繫結 ）

千夏Chinatsu發表於2020-10-24
Vue筆記

看栗子：

<body>
  <div id="app">
    <input type="button" value="按鈕" title="哈嘍~~~~這不是我的title"/>
  </div>
  <script src="./vue2.6.10.min.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        mytitle: '嗨！這是我自己定義的title',
      }
    })
  </script>
</body>

在這裡插入圖片描述
想把 mytitle所代表的 title值放到 < input />的 title中去

錯誤方式：

 <input type="button" value="按鈕" title="mytitle"/>

在這裡插入圖片描述
直接在title屬性中放入mytitle的話，mytitle會當當作字串解析，並不會得到我們想要的mytitle的值

正確方式：

 <input type="button" value="按鈕" v-bind:title="mytitle"/>

來吧展示：

在這裡插入圖片描述
自定義繫結多個屬性：

<div id="app">
  <!-- <input type="button" value="按鈕" title="哈嘍~~~~這不是我的title"/> -->
  <input type="button" value="按鈕" v-bind:title="mytitle" v-bind:id="myid"/>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        mytitle: '嗨！這是我自己定義的title',
        myid:'呀！這又是我自定義的id'
      }
    })
</script>

來吧展示：

在這裡插入圖片描述
在屬性v-bind中，如果想要寫入一段內容，不能直接寫入，要用單引號包裹起來，否則會被當作變數去找，找不到這個變數的值會報錯

錯誤的方式：

直接在後面拼接內容

<input type="button" value="按鈕" v-bind:title="mytitle+hhhh">

在這裡插入圖片描述
正確寫法：

用引號去包裹想要拼接的內容

<input type="button" value="按鈕" v-bind:title="mytitle+'hhhh'">

在這裡插入圖片描述
那麼問題來咯，如果拼接的內容不加引號的話，變數是不是可以自定義呢，yeah~~~，可以滴

  <div id="app">
    <!-- <input type="button" value="按鈕" title="哈嘍~~~~這不是我的title"/> -->
     <!-- <input type="button" value="按鈕" v-bind:title="mytitle" v-bind:id="myid"/> -->
    <!-- <input type="button" value="按鈕" v-bind:title="mytitle+'hhhh'"> -->
     <input type="button" value="按鈕" v-bind:title="mytitle+hhhh">
  </div>
  <script src="./vue2.6.10.min.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        mytitle: '嗨！這是我自己定義的title',
        myid:'呀！這又是我自定義的id',
        hhhh:"哈哈哈哈哈"
      }
    })
  </script>

來吧展示：

在這裡插入圖片描述

總結：v-bind的用法：
1.v-bind:屬性名稱 = "自定義屬性名稱"
比如：v-bind:title="mytitle"
2.可以省略v-bind，用:代替 ，可以簡寫成 :屬性名稱 = "自定義屬性名稱"
比如： :title="mytitle"
3. 如果想要實現單純的表示式的拼接，一定要用引號包裹起來，否則會被當作變數來解析，在被當作變數解析的情況下，可以再重新自定義屬性的值然後再拼接起來

相關文章