标签：object str note -- efault 多个 ret shu his
v-bind指令用于给html标签设置属性。
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
<div id="app"> <div v-bind:id="id1">文字</div> </div> <script> new Vue({ el: ‘#app‘, data: { id1: ‘myid‘ } }) </script>
会渲染如下：
<div id="myid">文字</div>
<span :text=‘ "we" + 1 ‘>使用</span>
会渲染如下：
<span text=‘we1‘>使用</span>
<div :text=‘1 + 2‘>test</div>
会渲染如下：
<div text="3">test</div>
<div :text=‘getText()‘>test</div> ...... <script> export default { methods: { getText() { return "this is text" } } } </script>
渲染成：
<div text="this is text">test</div>
<template> <div class="hello"> <div :text=‘obj‘>test</div> </div> </template> <script> export default { name: ‘HelloWorld‘, data () { return { obj: Object() } } } </script>
结果：
<div text="[object Object]">test</div>
如果对象有toString方法：
<template> <div class="hello"> <div :text=‘obj‘>test</div> </div> </template> <script> var obj = Object() obj.toString = function(){ return "data in obj" } export default { name: ‘HelloWorld‘, data () { return { obj: obj } } } </script>
则渲染的是toString方法的值：
<div text="data in obj">test</div>
<template> <div class="hello"> <div :text=‘array‘>test</div> </div> </template> <script> var array = Array() array[0] = "1" array[1] = "2" export default { name: ‘HelloWorld‘, data () { return { array: array } } } </script>
渲染为：
<div text="1,2">test</div>
<template> <div class="hello"> <div :text=‘myText‘>test</div> </div> </template> <script> export default { name: ‘HelloWorld‘, data () { return { value: "data" } }, computed: { myText: function(){ return "value is " + this.value } } } </script>
稍微对比一下，我们不难发现，计算属性和上面的各种功能是一样的，但是在字符串拼接的情况下，使用计算属性的好处是分离了，不在html中写逻辑。所以计算属性是更推荐的用法。
<div id="app"> <div v-bind:class="{active: isActive}">文字</div> </div> <script> new Vue({ el: ‘#app‘, data: { isActive: true } }) </script>
如果同时多个类都要判断，则可写成<div v-bind:class="{active: isActive, highlight: isHighlight}">文字</div>。
而且还可以绑定computed里的属性，毕竟data的数据是静态的，computed的属性可以计算：
<div id="app"> <div v-bind:class="classObject">文字</div> </div> <script> new Vue({ el: ‘#app‘, computed: { classObject: function () { // 计算过程省略，假设得出了isActive和isDanger的布尔值 return { ‘active‘: isActive, ‘text-danger‘: isDanger } } } }) </script>
参考：https://www.cnblogs.com/vuenote/p/9328401.html
参考：https://blog.csdn.net/qq_34911465/article/details/81432542
参考：https://www.jianshu.com/p/019b868c0279
标签：object str note -- efault 多个 ret shu his
原文地址：https://www.cnblogs.com/shix0909/p/11188263.html
