欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue指令v-bind

程序员文章站 2022-04-24 16:28:12
v-bind用于绑定 html 属性,通常会将v-bind缩写(如"v-bind:class"可缩写成":class"); v-bind除了可以绑定字符串类型变量以外,还可以支持单一的JavaScript表达式,如: 执行函数: 使用v-bind有三种绑定方法: ......

  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"}]'