Vue系列教程(三)v-bind指令

v-bind是用来绑定变量的.
我们给按钮设置title的方法如下:




    
    v-bind

鼠标方法按钮上会有提示,页面效果:
Vue系列教程(三)v-bind指令_第1张图片
现在我们想动态显示title的值,更改代码:

页面效果:
Vue系列教程(三)v-bind指令_第2张图片
我们发现,这样简单的替换是不可行的,这时候v-bind指令该登场了,更改代码如下:

页面效果:
Vue系列教程(三)v-bind指令_第3张图片
另外值得一提的是,v-bind会把后面引号里的内容当成一个合法的js表达式来解析,这意味着我们可以在后面的引号里任意拼接字符串:


页面效果:
Vue系列教程(三)v-bind指令_第4张图片
最后,介绍一下v-bind指令的简写形式,没错!就是冒号

你可能感兴趣的:(Vue系列教程(三)v-bind指令)