v-bind的动态绑定
Posted kukai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v-bind的动态绑定相关的知识，希望对你有一定的参考价值。
v-bind Vue的指令 动态绑定为属性赋值
语法： v-bind:属性(参数)=" 变量值"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.red {
color: blue;
}
.font {
font-size: 40px;
}
</style>
</head>
<body>
<div v-html="rawHtml" id="app" v-bind:class="{red:isRed,font:isFont}"></div>
<div id="app1" v-bind:style="{color:color,fontSize:fontSize}">listen and point</div>
<script>
var vm = new Vue({
el: "#app",
data: {
rawHtml: "<span>hello world111</span>",
isRed:true,
isFont:true,
}
});
var vm1 = new Vue({
el: "#app1",
data: {
color: "red",
fontSize: ‘50px‘,
}
});
</script>
</body>
</html>
以上是关于v-bind的动态绑定的主要内容，如果未能解决你的问题，请参考以下文章