vue深入理解v-bind指令
v-bind入门<span :text="content">使用</span>会渲染成如下:<span text="content">使用</span>字符串拼接<span :text=' "we" + 1 '&a
·
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指令不会有多少困难。
更多推荐
已为社区贡献3条内容
所有评论(0)