Vue指令学习笔记之bing指令
程序员文章站
2022-04-24 09:01:49
...
1.v-bind指令，是用来绑定属性的
a: 基本介绍
b. 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: red 3px solid;
}
</style>
</head>
<body>
<div id="app">
<!-- 操作元素中的某个属性，可以使用 v-bind -->
<img v-bind:src="imgSrc" alt="">
<!-- 简写就是直接 : 就可以，当操作 clss 属性的时候，可以使用三元表达式 -->
<!-- "isActive?'active'" 意思： 如果isActive为真，那么加active-->
<img :src="imgSrc" alt="" :title="imgTitle" :class="isActive?'active':''" @click='changeClick'>
<!-- 通过对象来操作 class，"{ active:isActive }" 如果 isActive为真，那么添加acitve ，如果某个class是确定不变的，那么可以写死，最后会自动合并-->
<img :src="imgSrc" alt="" :title="imgTitle" class="title" :class="{ active:isActive }" @click='changeClick'>
<!--数组语法 可以将class 放在数组中进行绑定，如果类名较多，可以绑定在 methods的函数中-->
<img :src="imgSrc" alt="" class="active" :class="[sun, li]">
<img :src="imgSrc" alt="" class="active" :class="getClasses()">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "https://tse1-mm.cn.bing.net/th/id/OIP.CUhQzmHXj3F-UhhFIdQoUgHaEx?pid=Api&rs=1",
imgTitle: '小*',
isActive: false,
sun: 'aaa',
li: 'bbb',
},
methods: {
changeClick: function(){
this.isActive = !this.isActive
},
// 数组动态绑定class对象
getClasses: function(){
return [this.sun, this.li]
}
}
})
</script>
<!--
v-bind总结：
作用：为元素绑定属性
完整写法： v-bind:属性名
简写： 省略 v-bind 只保留 :属性名
如果操作的是 class属性，那么更建议使用对象写法来操作
-->
</html>c.动态绑定style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--对象语法-->
<!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->
<h2 :style="{fontSize:size + 'px'}">{{message}}</h2>
<!-- 数组语法, 本质上绑定的还是数组-->
<h3 :style="[baseStyle]">{{message}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好！",
size: 100,
baseStyle: {backgroundColor: 'red'},
}
})
</script>
</body>
</html>