<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- v-bind指令的作用是：为元素绑定属性 -->
<div id="app">
<img v-bind:src="imgSrc" alt="" width="200px" height="200px">
<!-- v-bind:可以简写为: -->
<img :src="imgSrc" alt="" width="200px" height="200px" :title="imgTitle">
<!-- 字符串拼接 -->
<img :src="imgSrc" alt="" width="200px" height="200px" :title="imgTitle+'!!!'">
<!-- 表达式的方式 -->
<img :src="imgSrc" alt="" width="200px" height="200px" :class="is_Active?'active':''" @click="opActive">
<!-- 对象的方式，建议使用这种方式 -->
<img :src="imgSrc" alt="" width="200px" height="200px" :class="{active:is_Active}" @click="opActive">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"https://cn.vuejs.org/images/logo.svg",
imgTitle:"马赫太帅了",
is_Active:false,
},
methods:{
opActive:function(){
this.is_Active = !this.is_Active
}
}
})
</script>
</body>
</html>