Vue模板语法v-bind教程示例
更新时间：2023年12月07日 11:14:07 作者：wx5bcd2f496a1cf
这篇文章主要为大家介绍了Vue模板语法v-bind教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
vue的模板
红色框里面的都是vue的模板。有了模板就得有模板的特殊语法。上面只是简单的双括号加上表达式，这种叫做插值语法，除了这种语法还有其他语法吗？
插值语法实现的功能很单一，就是将指定的值放到指定的位置。还有一种叫做指令语法，它能够完成的就相对高端一些。
vue里面的指令很多，都是以v-开头。
将执行的结果绑定给v-bind
下面其实就是将执行的结果绑定给v-bind
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >点击我去百度</a>
//如果加上v-bind:，那么vue会将引号里面包着的东西url拿出来当js表达式去执行，url就相对于变量
new Vue({
el: "#app",
data:{
name: "lucas",
url: "https://www.baidu.com",
}
})v-bind可以指定任何一个属性。bind可以给标签里面任何一个标签属性动态的绑定值。
v-bind:可以简写为:冒号。
<div id="app">
<h1>hello world name:{{name}}</h1>
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" v-bind:x="hello">点击我去百度</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#app",
data:{
name: "lucas",
url: "https://www.baidu.com",
hello: "xxx",
}
})通过上面可以看到插值语法往往用于指定标签体内容，也即是html元素中间部分。这部分需要渲染可以使用插值语法。
v-bind不管理标签里面的内容，它是用于管理标签的属性。
Vue模板语法有2大类
1.插值语法
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法
功能：用于解析标签(包括：标签属性、标签体内容、绑定事件...)。
举例：v-bind:href="xxx" 或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
在data当中，不仅仅可以是基本的数据类型，还可以是对象。所以data里面的数据可以是多级的结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--引入vue,这里引入vue那么这里就多了vue构造函数-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>hello world name:{{name}} school里面的name:{{school.name}}</h1>
<a v-bind:href="school.url" rel="external nofollow" v-bind:x="hello">点击我去百度</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#app",
data:{
name: "lucas",
school:{
name: "jerry",
url: "https://www.baidu.com",
},
}
})
</script>
</body>
</html>对于插值语法没有什么高深的玩法，就两对花括号{{}}里面写上表达式
以上就是Vue模板语法v-bind教程示例的详细内容，更多关于Vue v-bind模板语法的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了如何写好一个vue组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
本文主要介绍了Vue 编程式路由导航2022-04-04
在使用Vue.js进行前端开发的过程中,Element UI 是一个非常流行的UI库,它提供了一套完整的组件来快速搭建美观的用户界面,但是我们经常遇到一个问题使用Element UI提供的el-date-picker组件时,尝试自定义其样式却无法生效,所以本文给大家介绍如何解决这个问题2024-10-10
Vue项目中使用pdfjs-dist实现在线浏览PDF文件功能
pdfjs-dist是一个用于在浏览器中渲染 PDF 文件的 JavaScript 库,它能够将 PDF 文件解析并渲染为 HTML5 的 canvas 元素,从而实现跨平台、无需插件的 PDF 预览,本文给大家介绍了Vue项目中如何使用pdfjs-dist实现在线浏览PDF文件功能,需要的朋友可以参考下2025-08-08
本文主要介绍了根据用户所购买服务的不同，有不同的页面展现。文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue父子组件传值问题，文章中有详细的示例代码，感兴趣的同学可以参考阅读2023-04-04
本篇文章主要介绍了在vue中通过axios异步使用echarts的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了jenkins自动化部署vue，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了koa2+vue实现登陆及登录状态判断，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-08-08
vue或react项目生产环境去掉console.log的操作
这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论