1.绑定属性 v-bind 或者 : 例如:<img :src="pic_src" />
<template>
<div id="app">
<img :src="pic_src" />
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
pic_src: "https://cn.vuejs.org/images/logo.png",
};
}
};
</script>
<style>
</style>
2.绑定class <div :class="{'red':active}">111111111111</div>
<template> <div id="app"> <img :src="pic_src" /> <hr/> <div :class="{'red':active}">111111111111</div> </div> </template> <script> export default { name: "app", data() { return { pic_src: "https://cn.vuejs.org/images/logo.png", active: true }; } }; </script> <style> .red { color: red; } </style>
3.绑定style <div :style="{color:color}">2222222222</div>
<template> <div id="app"> <img :src="pic_src" /> <hr/> <div :class="{'red':active}">111111111111</div> <hr/> <div :style="{color:color}">2222222222</div> </div> </template> <script> export default { name: "app", data() { return { pic_src: "https://cn.vuejs.org/images/logo.png", active: true, color:'blue' }; } }; </script> <style> .red { color: red; } </style>
最终页面效果: