vue学习笔记（一）---- vue指令（ v-bind 属性绑定）

时间 2020-10-25

标签 html vue app 3d code htm blog 图片字符串栏目 HTML 繁體版

原文原文链接

看栗子：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. 若是想要实现单纯的表达式的拼接，必定要用引号包裹起来，不然会被看成变量来解析，在被看成变量解析的状况下，能够再从新自定义属性的值而后再拼接起来

vue学习笔记（一）---- vue指令（ v-bind 属性绑定 ）

vue学习笔记（一）---- vue指令（ v-bind 属性绑定）