vue學習筆記(一)---- vue指令( v-bind 屬性綁定 )

看栗子:html

<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中去vue

錯誤方式:app

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

在這裏插入圖片描述
直接在title屬性中放入mytitle的話,mytitle會當看成字符串解析,並不會獲得咱們想要的mytitle的值3d

正確方式:code

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

來吧展現:htm

在這裏插入圖片描述
自定義綁定多個屬性:blog

<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中,若是想要寫入一段內容,不能直接寫入,要用單引號包裹起來,不然會被看成變量去找,找不到這個變量的值會報錯ip

錯誤的方式:字符串

直接在後面拼接內容

<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. 若是想要實現單純的表達式的拼接,必定要用引號包裹起來,不然會被看成變量來解析,在被看成變量解析的狀況下,能夠再從新自定義屬性的值而後再拼接起來

相關文章
相關標籤/搜索