Vue系列教程（三）v-bind指令

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
</head>
<div id="app">
    <input type="button" value="按钮" title="title">
</div>
<body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            myTitle: '自定义title'
        }
    })
</script>
</body>
</html>

鼠标方法按钮上会有提示，页面效果：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200209175406129.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lpaWxpdXlhbmc=,size_16,color_FFFFFF,t_70)
现在我们想动态显示title的值，更改代码：

<input type="button" value="按钮" title="myTitle">

页面效果：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200209175509192.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lpaWxpdXlhbmc=,size_16,color_FFFFFF,t_70)
我们发现，这样简单的替换是不可行的，这时候v-bind指令该登场了,更改代码如下：

<input type="button" value="按钮" v-bind:title="myTitle">

页面效果：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200209175654342.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lpaWxpdXlhbmc=,size_16,color_FFFFFF,t_70)
另外值得一提的是，v-bind会把后面引号里的内容当成一个合法的js表达式来解析，这意味着我们可以在后面的引号里任意拼接字符串：

<input type="button" value="按钮" v-bind:title="myTitle + '1234'">

页面效果：
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200209175916660.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lpaWxpdXlhbmc=,size_16,color_FFFFFF,t_70)
最后，介绍一下v-bind指令的简写形式：，没错！就是冒号：

<input type="button" value="按钮" :title="myTitle">
posted @ 2020-02-09 18:36  刘阳不吃饭  阅读(489)  评论(0)    收藏  举报