Vue.js教程（二）：v-bind动态属性
上一节我们学习了Vue的基本语法，里面有个占位变量{{message}}。这种{{message}}形式的vue变量只适合给标签中的文本复制（开始标签和结束标签中间的文字）。v-bind是给属性设置变量的。简介v-bind是给属性设置变量的。属性和文本的含义如下：<span title="qianfeng">hello Vue</spa
·
上一节我们学习了Vue的基本语法，里面有个占位变量{{message}}。这种{{message}}形式的vue变量只适合给标签中的文本复制（开始标签和结束标签中间的文字）。v-bind是给属性设置变量的。
简介
v-bind是给属性设置变量的。属性和文本的含义如下：
<span title="qianfeng">hello Vue</span>
如上，title是属性，hello Vue是文本。Vue操作文本可以如下写法：
<span title="qianfeng">{{text}}</span>
但是操作title属性使用双大括号就是错误的，比如如下就是错误的：
<span title="{{title}}">{{text}}</span>
如上属性title中使用{{title}}格式占位是无效的。
属性中的占位变量需要使用v-bind操作。
v-bind使用
v-bind作用于标签的属性上，用户绑定属性变量（动态属性）。比如要将title属性通过vue动态赋值，操作步骤和语法如下：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第一步：导入vue.js的引用-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--第二步：使用v-bind绑定动态属性-->
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<!--第三步：激活vue，给动态属性复制-->
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
以上代码，除了v-bind之外的其他Vue语法在上一节已经讲过。
学习前端最好的方式就是动手用一用，效果出来了就明白了。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)