vue指令 v-bind的使用和注意需要注意的点
更新时间：2021年11月22日 10:32:00 作者：huxiaoxiao
这篇文章主要给大家分享了 v-bind的使用和注意需要注意的点，下面文章围绕 v-bind指令的相关资料展开内容且附上详细代码 需要的小伙伴可以参考一下，希望对大家有所帮助
1、v-bind:可以为元素的属性绑定一些数据
<div id="app">
<p v-bind:title="message" v-bind:id="pId">我是p标签</p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"我是p标签的title值",
pId:"这是随便给的id"
}
})
输出为：
2、v-bind:可以简写成 ： 推荐直接写冒号
<div id="app">
<p :title="message" :id="pId">我是p标签</p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"我是p标签的title值",
pId:"这是随便给的id"
}
})
输出和上面结果相同
3、v-bind：指令表达式的拼接，
如果想要实现表达式的拼接，被拼接的字符串一定要被引号包裹起来，否则会被当做变量解析
不加引号：
报错：[Vue warn]: Property or method "这是追加的id" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
加引号：
<p title="200" :title="message" :id="pId+'这是追加的id'">我是p标签</p>
输出结果：
到此这篇关于 v-bind的使用和注意需要注意的点的文章就介绍到这了,更多相关 v-bind的使用和注意点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文介绍了如何利用Vue和Vant框架结合moment.js插件来实现一个7天日历展示功能,在这个功能中,用户可以在切换日期时看到界面的实时变化,此外,文章还提供了代码实现和效果测试的详细步骤,帮助开发者能够顺利完成类似的项目开发2024-10-10
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
这篇文章主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
Vue 实例在建立的时候会运行一系列的初始化操作，而在这些初始化操作里面，和数据绑定关联最大的是 initState。这篇文章主要介绍了vue数据初始化--initState,需要的朋友可以参考下2019-04-04
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧2023-10-10
本文主要介绍了Vue3+axios+Mock.js实现登录功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
map()函数定义在JS的array中,它返回一个新的数组,下面这篇文章主要给大家介绍了关于Vue中map()的用法案例,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
本文主要介绍了vue2+springsecurity权限系统的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Vue全局拦截所有请求并在请求头中添加token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家介绍了springboot+vue测试平台前端项目实现查询新增功能，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
这篇文章主要为大家详细介绍了vue-awesome-swiper滑块插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论