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


    看栗子:

    <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. 如果想要实现单纯的表达式的拼接,一定要用引号包裹起来,否则会被当作变量来解析,在被当作变量解析的情况下,可以再重新自定义属性的值然后再拼接起来

  • 相关阅读:
    Java中Date和Calender类的使用方法
    看《做性能测试需要做些什么》
    【笔记】jquery append,appendTo,prepend,prependTo 介绍
    【实践】jquery实现滑动动画及轮播
    【实践】四联联动 + 更加优化
    【实践】jQuery实现三联联动
    关于导入excel报错的处理(xls,xlsx)
    递归算法及经典案例
    验证身份证真假
    正则表达式
  • 原文地址:https://www.cnblogs.com/Chinatsu/p/13870619.html
Copyright © 2020-2023  润新知