首页 > 其他 > 详细

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

时间:2020-02-09 19:09:28      阅读:75      评论:0      收藏:0      [点我收藏+]

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>

鼠标方法按钮上会有提示,页面效果:
技术分享图片
现在我们想动态显示title的值,更改代码:

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

页面效果:
技术分享图片
我们发现,这样简单的替换是不可行的,这时候v-bind指令该登场了,更改代码如下:

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

页面效果:
技术分享图片
另外值得一提的是,v-bind会把后面引号里的内容当成一个合法的js表达式来解析,这意味着我们可以在后面的引号里任意拼接字符串:

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

页面效果:
技术分享图片
最后,介绍一下v-bind指令的简写形式,没错!就是冒号

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

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

原文:https://www.cnblogs.com/lauyon/p/12288200.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!