v-bind用于绑定 html 属性,通常会将v-bind缩写(如"v-bind:class"可缩写成":class");

  v-bind除了可以绑定字符串类型变量以外,还可以支持单一的JavaScript表达式,如:

  1. 行运算:
    <div id="app">
        <p v-bind:title="t1 + ' ' + t2">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p>
    </div>
    ......
    var vm = new Vue({
        el: '#app',
        data: {
            t1: 'title1',
            t2: 'title2'
        }
    });
  2. 执行函数:

    <div id="app">
        <p v-bind:title="getTitle()">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p>
    </div>
    ......
    var vm = new Vue({
        el: '#app',
        data: {
            getTitle: function () {
                return 'title content';
            }
        }
    });

     

  使用v-bind有三种绑定方法:

  1. 对象型:'{red:isred}'
  2. 三目型:'isred?"red":"blue"'
  3. 数组型:'[{red:"isred"},{blue:"isblue"}]'
   

相关文章:

  • 2021-04-28
  • 2021-10-17
  • 2021-09-17
  • 2022-12-23
  • 2021-12-16
  • 2021-07-08
  • 2021-09-17
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-05-14
  • 2022-12-23
  • 2021-07-14
  • 2021-09-04
  • 2022-12-23
相关资源
相似解决方案