看栗子:

<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>

vue学习笔记(一)---- vue指令( v-bind 属性绑定 )-LMLPHP
想把 mytitle所代表的 title值放到 < input />title中去

错误方式:

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

vue学习笔记(一)---- vue指令( v-bind 属性绑定 )-LMLPHP
直接在title属性中放入mytitle的话,mytitle会当当作字符串解析,并不会得到我们想要的mytitle的值

正确方式:

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

来吧展示:

vue学习笔记(一)---- vue指令( v-bind 属性绑定 )-LMLPHP
自定义绑定多个属性:

<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>

来吧展示:

vue学习笔记(一)---- vue指令( v-bind 属性绑定 )-LMLPHP
在属性v-bind中,如果想要写入一段内容,不能直接写入,要用单引号包裹起来,否则会被当作变量去找,找不到这个变量的值会报错

错误的方式:

直接在后面拼接内容

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

vue学习笔记(一)---- vue指令( v-bind 属性绑定 )-LMLPHP
正确写法:

用引号去包裹想要拼接的内容

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

vue学习笔记(一)---- vue指令( v-bind 属性绑定 )-LMLPHP
那么问题来咯,如果拼接的内容不加引号的话,变量是不是可以自定义呢,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>

来吧展示:

vue学习笔记(一)---- vue指令( v-bind 属性绑定 )-LMLPHP

10-25 02:45