vue深入理解v-bind指令

v-bind入门

<span :text="content">使用</span>

会渲染成如下：

<span text="content">使用</span>

字符串拼接

<span :text=' "we" + 1 '>使用</span>

会渲染成：

<span text='we1'>使用</span>

所以，要想在v-bind指令中使用字符串拼接，只需要结合引号即可。

运算

<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>

同样是toString的值

v-bind vs 计算属性

<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中写逻辑。所以计算属性是更推荐的用法。

结论

综上所述，v-bind指令里，使用的是合法的javascript表达式，以此为原则，以后写v-bind指令不会有多少困难。