-categories:
- vue基础
tags: - vuebind
指令之v-bind
v-bind 绑定元素属性
:width="image.width" :height="image.height" :src="image.url" :alt="image.alt"
v-bind 绑定元素class
:class="{active:Active}"
v-bind 绑定元素行内样式
:style="{color:color_y,background:background_b}"
示例demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令之v-bind</title>
<style>
.active{
font-weight: 800;
}
</style>
</head>
<body>
<div id="app">
<div>v-bind 绑定元素属性</div>
<!-- v-bind:href 可简写成 :href -->
<div>
<a v-bind:href="msg.link">{{ msg.name }}</a>
</div>
<img :width="image.width" :height="image.height" :src="image.url" :alt="image.alt">
<hr>
<div>v-bind 绑定元素class</div>
<div :class="{active:Active}">
v-bind 绑定元素class
</div>
<hr>
<div>v-bind 绑定元素行内样式</div>
<div :style="{color:color_y,background:background_b}">
v-bind 绑定元素行内样式
</div>
<hr>
</div>
<!-- 1. 引包-->
<script src="./vue.js"></script>
<script>
// 2.初始化
const vm = new Vue({
el: '#app',
// 数据属性
data: {
msg:{
name: '百度',
link: 'http://www.baidu.com'
},
image:{
url: "https://www.baidu.com/img/bd_logo1.png",
alt: '百度百度',
height: 40,
80,
},
Active: 'active',
color_y: 'yellow',
background_b: 'black'
}
})
</script>
</body>
</html>