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的使用和注意点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
antd配置config-overrides.js文件的操作
这篇文章主要介绍了antd配置config-overrides.js文件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家介绍了Vue之监听数据的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>2021-11-11
本篇文章主要介绍了vuejs实现递归树型菜单组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue3项目使用样式穿透修改elementUI默认样式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
在项目中使用自定义字体可以提升页面的视觉效果,并确保在不同设备上的一致性,文中通过代码示例给出了具体的操作步骤,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了浅谈vue加载优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
详解vue-cli + webpack 多页面实例配置优化方法
本篇文章主要介绍了详解vue-cli + webpack 多页面实例配置优化方法，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
本文主要介绍了Vue中使用Element的Table组件实现嵌套表格,通过type="expand"设置了一个展开按钮,点击该按钮会显示与当前行关联的子表格内容,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了vue如何实现简易的弹出框，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论