• v-bind绑定

      一、标签属性动态绑定

            方式一： v-bind:属性名="data声明的变量名"

            方式二：（简写） 将v-bind省略，直接 :属性名="data声明的变量"

            v-bind.属性名[.修饰符]="变量名、计算属性。。

            对应还提供了修饰符：

               1 .camel: 将横杠形式属性名转换成驼峰形式的属性名

                    如：v-bind:view-box="viewBoxData" 显示为view-box="**"

                    使用v-bind:view-box.camel="viewBoxData"> 显示为viewBox="**"

               2 .attr 强制绑定dom原生属性

                    v-bind:age.attr="123" > 查看html代码：标签上看到age=123

               3 .prop 强制绑定子组件的prop属性

                    v-bind:age.prop="123" 查看html代码，标签上看不到age属性

    二、动态指定属性名

    eg:

    html代码：

           

    动态指定属性名

           

           

    script里面的代码如下：

    data(){
    return{
        igurl:'https://cn.vuejs.org/images/logo.png',
        age:19,
        viewboxdata:'0 0 128 128',
        key:'disabled',
        value: true,
        id: 999,
        to: 'http://www.baidu.com'
    }
    }

    data 里面key的值为disabled，value为true。显示效果如下图

    通过修改key的值，按钮可以点击了

    三、同时绑定多个属性

    以对象的方式绑定， key就是标签的属性名，value就是动态值

    如果标签上有显示写明相同名称的属性，按编写属性的顺序，则后面的会覆盖前面的

     下面的展示的是 id="8888"

            v-bind简写动态绑定多个属性

     下面的展示的是 id="999"

              v-bind简写动态绑定多个属性

    eg:

            v-bind简写动态绑定多个属性

           

            v-bind 动态绑定多个属性

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>v-bind属性动态绑定title>
    7. head>
    8. <body>
    9.     
    10.     <div id="app">
    11.         
    12.         <h3>v-bind标签属性动态绑定h3>
    13.  
    14.         <img v-bind:src="igurl">
    15.         
    16.         <h3>简写方式`:属性名="**"`h3>
    17.         <img :src="igurl">
    18.         
    19.         
    20.         <h3>.attr 指明绑定到原生属性h3>
    21.         <img :src.attr="igurl">
    22.  
    23.         
    24.         <h3>.prop 指明绑定到子组件属性h3>
    25.         <img :src.prop="igurl">
    26.         
    27.         <p :age="age">没有指定修饰符p>
    28.         
    29.         <p :age.attr="age">attr修饰符p>
    30.         
    31.         <p :age.prop="age">prop修饰p>
    32.         
    33.         <h3>.camel将横杠转为驼峰形式h3>
    34.         
    35.         <p :id-card.camel="age" >.camel修饰，不是必要属性不会转为驼峰p>
    36.         
    37.         <svg class="logo" :view-box.camel="viewboxdata" width="24" height="24" data-v-c0161dce=""><path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-c0161dce="">path><path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-c0161dce="">path>svg>
    38.         
    39.         
    40.         <h3>动态指定属性名h3>
    41.         <button disabled="true">按钮button>
    42.         <button :[key]="value">动态绑定属性名button>
    43.  
    44.         
    45.         <a id="9999" :="{id : id,href:to}">v-bind简写动态绑定多个属性a>
    46.         <br>
    47.         <a id="9999" v-bind:="{id : id,href:to}">v-bind 动态绑定多个属性a>
    48.  
    49.  
    50.     div>
    51.  
    52.     <script src="./node_modules/vue/dist/vue.global.js">script>
    53.     <script type="text/javascript">
    54.         const {createApp} = Vue;
    55.         const app = createApp({
    56.             data(){
    57.                 return{
    58.                     igurl:'https://cn.vuejs.org/images/logo.png',
    59.                     age:19,
    60.                     viewboxdata:'0 0 128 128',
    61.                     key:'disabled',
    62.                     value: true,
    63.                     id: 999,
    64.                     to: 'http://www.baidu.com'
    65.                 }
    66.             }
    67.         }).mount("#app");
    68.         console.log('app',app);
    69.     script>
    70. body>
    71. html>

  • 相关阅读:
    【JavaWeb】品牌管理系统前后端代码实现
    Spring中过滤器(Filter)和拦截器(Interceptor)的区别和联系
    Milk-V Duo快速上手
    seo优化
    Autosar MCAL-S32K324Spi配置-基于EB
    NLP 01(介绍)
    K8S：Pod概念、分类及相关的策略
    CompletableFuture异步优化代码
    基于JavaFX的扫雷游戏实现（四）——排行榜
    【国科大——矩阵分析与应用】使用高斯消元法，测试二元一次方程系数产生的误差
  • 原文地址：https://blog.csdn.net/QWERTY55555/article/details/133689712