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

  • 相关阅读:
    jQuery的标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')
    jQuery Validate验证框架与 jQuery ajaxSubmit的联合使用
    23种设计模式(一) 单例模式
    java 常见的几种运行时异常RuntimeException
    Servlet 生命周期、工作原理
    throw与throws的区别
    Apache Shiro java安全框架
    web.xml 中<context-param>与<init-param>的区别与作用
    web.xml 中CharacterEncodingFilter类的学习
    web.xml中的contextConfigLocation在spring中的作用
  • 原文地址:https://www.cnblogs.com/Chinatsu/p/13870619.html
Copyright © 2011-2022 走看看