bind 的一些理解和思考

它是一个 vue 指令,用于绑定 html 属性,如下:

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

这里的 html 最后会渲染成:

<div> <p title="title content">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div>

二、指令预期值

上面这种 v-bind 这也是我们对于 vue 指令最初的理解,但实际上,vue 指令的预期值(如 v-bind:class="classProperty" 中,v-bind 是指令,: 后面的 class 是参数,而 classProperty 则在官方文档中被称为“预期值”),除了像上面那样绑定一个字符串类型变量,其实它是支持一个单一 JavaScript 表达式 (v-for 除外)。
所以在这里,我们就可以有更多的选择,例如:

(1)执行运算

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

最后渲染的结果:

<div> <p title="title1 title2">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div>

(2)执行函数等

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

最后渲染的结果:

<div> <p title="title content">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div>

三、支持的数据类型

上面的内容,指令预期值得到的都是字符串类型的数据,但实际上,我们知道 js 有很多数据类型,它如果放入其中呢?

(1)对象类型

<div> <p v-bind:title="obj">content</p> </div> ...... var obj = {}; var vm = new Vue({ el: '#app', data: { obj: obj } });

为什么一来就选择对象类型呢?答案是它比较有代表性,它渲染结果如下:

<div> <p title="[object Object]">content</p> </div>

诶,这个怎么有点眼熟?有点像...没错!对象的 toString 方法的返回值!为了验证我们的猜想,我们进行进一步的测试:

<div> <p v-bind:title="obj">content</p> </div> ...... var obj = {}; obj.toString = function () { return 'edited in toString!'; }; var vm = new Vue({ el: '#app', data: { obj: obj } });

上面这里修改了 obj 的  toString 方法(但准确的说,这里不是修改,而是添加。一开始的 obj 对象上自身是没有 toString 方法的,它继承了 Object.prototype.toString,但这里我们执行 obj.toString  = function..... 实际上是为它添加了一个 toString 方法,使得它执行的时候,不用再去调用继承自 Object 的方法),渲染结果如下:

<div> <p title="edited in toString!">content</p> </div>

这里就进一步证实了我们的猜想。

(2)数组类型

数组类型的 toString 方法和对象类型的有所不同,它将返回和执行 arr.join(',') 相同的结果。如 [1, 2, 3].toString() 将返回 “1,2,3”。下面进行测试:

<div> <p v-bind:title="arr">content</p> </div> ...... var vm = new Vue({ el: '#app', data: { arr: [1, 2, 3] } });

渲染结果如下:

<div> <p title="1,2,3">content</p> </div>

仍然跟预期结果一样。

(3)其它类型

number 类型,正常执行 toString,包括数字0,结果都正常渲染成对应的字符串;

boolean 类型,true 正常渲染成字符串 "true",但 false 虽然执行 toString 方法将返回 "false" 字符串,但是却没有渲染出来;

null / undefined 类型,二者没有 toString 方法,也没有渲染出来。

显然,在执行 toString 方法之前,vue 内部应该先做了类型校验,满足条件才输出。而且这里不是简单的真 / 假值校验,因为 、0 虽为假值,但最终却像真值一样渲染了出来。具体如何实现,可能需要参考 vue 的源码了,这里不再深究。

四、多 html 属性值绑

一个的 html 属性值,可能包含许多内容,需要我们进行一些操作,将多个数据绑定到一个属性上,这里我们可以考虑像前面一样,通过如 “+” 等运算符号等实现字符串的连接操作。但是事实上,字符串连接麻烦又易错,不易于维护。于是我们可以考虑像前面一样向指令预期值中存入一个对象或数组,来实现多个数据绑定到一个属性上的作用。

(1)利用对象绑定

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyxxyw.html