[vue]v-bind: sytle/class-bind&属性值绑定
Posted 毛台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[vue]v-bind: sytle/class-bind&属性值绑定相关的知识，希望对你有一定的参考价值。
v-bind
- style绑定
- class绑定
- 属性值绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind:</title>
<style>
.x {background: blue}
.y {font-size: 30px}
.z {color: pink}
</style>
</head>
<body>
<div id="app">
<h1>bind: class</h1>
<div class="x" :class="[class1,class2,{z:true}]">maomao</div>
<h1>bind: style</h1>
<p :style="[style1,style2,{fontSize:'30px'}]">have a test p</p>
<p style="background-color:lavenderblush;">hello world</p>
<p :style="[style0,]">hello world</p>
<h2>属性值: 链接/图片</h2>
<a :href="baiduUrl">baidu.com</a>
<img :src="imageUrl" alt="">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: false,
//属性绑定
baiduUrl: 'https://www.baidu.com',
imageUrl: 'http://t.cn/R3GPvKW',
//bind-style
style0: {color: 'lavender',},
style1: {background: 'pink',},
style2: {color: 'white',},
// bind-class
class1: 'x',
class2: 'y',
}
})
</script>
</body>
</html>以上是关于[vue]v-bind: sytle/class-bind&属性值绑定的主要内容，如果未能解决你的问题，请参考以下文章
[Vue] Update Attributes, Classes and Styles in Vue.js with v-bind