Vue的初级指令v-bind

v-bind用于绑定数据，那我们会疑惑，绑定数据我们用插值表达式不就好了吗？

{{}}确实是我们最常用的数据绑定形式，但是我们根据需求和应用场景，也需要使用不同的标签

首先我们来写这样一个文本框

我想让他文本框的内容，用js进行一个加工，我们先试试插值语法

我们给input标签里的value 进行一个插值，我们来看看页面的效果

我们发现，好家伙，并没有生效，相当于只是给value了一个字符串

想要达到我们的效果，这个时候我们就要用到v-bind这个指令了

v-bind该怎么用呢？

我们的语法是在标签的属性前面加上v-bind：，然后再把对象给到属性就可以啦

 来，我们看一下页面的效果

我们用v-bind达到了目的，但是v-bind的作用不仅如此，我们还可以用v-bind来干什么呢？

我们让文本框的value运行这样一个计算

 

 我们得出了一个结论，v-bind是支持js的一切表达式的；

无独有偶，那我们再来试一下href的跳转地址

 

我们还是用插值表达式进行试验

 我们发现，js是不支持我们这种写法的，我们还是要使用到v-bind进行数据的绑定

这里报错提示我们应该使用：id=“val”的这种写法，那这个表示什么意思呢？

其实就是v-bind的缩写，v-bind:value=:value；

我们还是继续使用v-bind

 

 这个时候我们就可以成功的跳转啦。

我们还可以用v-bind来改变标签的颜色

 我们成功的更改了颜色，由此我们得出，v-bind用于改变标签内的属性；

而标签内的文本我们选择用插值表达式。