v-bind 给标签属性绑定使用

v-bind 给标签属性绑定使用

1.v-bind 是将标签属性和data参数绑定或者在其中写一些简单的js表达式
2.和v-text,v-html不同它俩是针对标签中的内容,v-bind 是针对标签中的属性,但是这个三个指令和大胡子语法不同,指令都死在标签属性中定义
3.v-bind的缩写是冒号:

v-bind 案例

1.简单的说也就是当我们想让标签中的属性可以根据vue绑定的data形成绑定,就可以使用v-bind
2.或者当我们想让这个标签可以通过一些三元表达式展示一些我们想的到的效果,也可以使用v-bind让标签中的属性形成可以运行表达式的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app" >
        <a v-bind:href="url" v-bind:title="title">v-bind的缩写是冒号:</a>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                url:"www.baidu.com",
                title:'百度'
            }
        })
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,276评论 0 25
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,629评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,108评论 4 129
  • 以下内容是我在学习和研究Vue时,对Vue的特性、重点和注意事项的提取、精练和总结,可以做为Vue特性的字典; 1...
    科研者阅读 14,153评论 3 24