Vue.js教程（二）：v-bind动态属性

最新推荐文章于 2024-03-03 10:00:00 发布

杨景文Blog

最新推荐文章于 2024-03-03 10:00:00 发布

阅读量4.3k

点赞数 1

分类专栏：前端技术文章标签： vue js

本文链接：https://blog.csdn.net/muyi_amen/article/details/84106097

版权

前端技术专栏收录该内容

9 篇文章 3 订阅

订阅专栏

上一节我们学习了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语法在上一节已经讲过。

学习前端最好的方式就是动手用一用，效果出来了就明白了。

杨景文Blog

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js教程（二）：v-bind动态属性

上一节我们学习了Vue的基本语法，里面有个占位变量{{message}}。这种{{message}}形式的vue变量只适合给标签中的文本复制（开始标签和结束标签中间的文字）。v-bind是给属性设置变量的。简介v-bind是给属性设置变量的。属性和文本的含义如下：&lt;span title="qianfeng"&gt;hello Vue&lt;/span&gt;如上，title是属...
复制链接

扫一扫