1. v-bind指令
- 作用：为元素绑定属性
- 表达式：v-bind:属性名=表达式
- 简写：冒号(:)属性名, 如 :class
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
border: 1px solid yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind:属性=表达式 -->
<img v-bind:src="imgSrc">
<!-- 简写 -->
<img :src="imgSrc" :title='imgTitle'>
<!-- class属性 三元表达式写法 -->
<img :src="imgSrc" :title='hintMes' :class='isActive?"active":" "' @click="changeActive">
<!-- class属性 对象的方式 -->
<img :src="imgSrc" :title='hintMes' :class='{active:isActive}' @click="changeActive">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrc: "./test_img.jpg",
imgTitle: '我是小白',
isActive: false,
hintMes:'点我就绿了'
},
methods: {
changeActive: function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
