您的位置：首页 > 产品设计 > UI/UE

vue.js学习笔记之属性绑定 v-bind

2017-02-25 21:27 966 查看
vue.js中有许多的指令，其中属性绑定的是v-bind。

v-bind可以绑定src,style,class

一、地址绑定

HTML代码：

<body>
<div id="srcbind">
<a v-bind:href="src"> yovan's CSDN Blog </a>
</div>
</body>js代码：
<script>
let me = new Vue({
el:"#srcbind",
data:{
src:"http://blog.csdn.net/weixin_35103712"
}

})
</script>

网页编译后的代码是：
<a href="http://blog.csdn.net/weixin_35103712"> CSDN blog </a>
二、样式绑定
HTML代码：<body>
<div id="stylebind">
<p v-bind:style="style">
Hello,I am {{myname}}
</p>
</div>
</body>js代码：
<script>
let me = new Vue({
el:"#stylebind",
data:{
myname:"yovan",
style:{
color:"blue",
'font-size':"20px"
}
}

})
</script>

值得注意的是：样式绑定的时候，有的属性是有带“-”符号的，比如js代码中的font-size，如果直接写会报错（Uncaught SyntaxError: Unexpected
token -），这时，有两种解决方法：1、我们需要将font-size给加单引号-->'font-size'；2、可以用驼峰命名法解决，如fontSize。

至于v-bind的绑定class的，暂时还没接触到，后续接触会继续更新......
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  v-bind vue.js
相关文章推荐
新的分享
章节导航