v-bind
css代码
#app{
padding: 150px;
}
#app img{
width: 150px;
}
.change1{
background-color: aliceblue;
font-size: 26px;
}
.change2{
width: fit-content;
padding: 30px;
margin: 50px auto;
}
new Vue({
el: '#app',
data() {
return {
tip1:"change1",
tip2:"change2",
ww:"100px",
hh:"100px",
cc:"#f00",
imgSrc:"./img/mbh.webp",
divStyle:{
width:"100px",
height:"100px",
background:"#f0f"
},
arr:[
{
name:"杜甫",
id:1
},
{
name:"李白",
id:2
},
{
name:"苏轼",
id:3
},
]
}
},
methods: {
changeSrc(){
this.imgSrc="./img/laosi.webp"
}
}
});
```js
### v-bind 使用格式
用于修改行内属性\
格式：`v-bind:属性名='变量'`\
简写：`:属性名=‘变量’
<button @click="changeSrc">切换图片</button> <br>
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="">
注意：
1. 不是双向绑定，只修改属性值
2. 尽量不要和v-model一起使用，value和v-model赋不一样的值时，会发生冲突
3. 声明v-bind之后，出数字、特殊字符外，只能通过data数据获取内容，所以我们尽量都在v-bind里写变量就可以了
### []()[]()style改变样式
1. 合并在一起写：将样式以对象的形式存在data中，style中直接调用
2. 拆分每个变量，在style中以对象的形式分别进行设置
``` <!-- 写单个变量名 -->
<div :style="divStyle">这是写的变量名</div>
<div :style="{width:'200px',height:'150px',background:'#f00'}">这是单独写的</div>
<div :style="{width:ww,height:hh,background:cc}"></div>
class操作类名
-
单独写一个变量名
:class="变量名"只写一个的话，要写变量名 -
写数组
1.：class=['class名1','class名2']数组里的数据加引号的话，就填入class名
2.：class=[变量名1,变量名2]数组里面的数据不加引号，就填入变量名 -
对象形式，判断：后面是否为true ，如果是true就调用这个类名的设置的样式
：class="{class名:true/false,class名2:true/false}"
：class="[{class名:true/false},变量名]
<div :class="{change1:true}">
这是class后面写对象格式,为 true
</div>
<div :class="{change1:false}">
这是class后面写对象格式,为 false
</div>
<div :class="[tip1,{change2:4>3}]">
这是class后面写对象格式，里面写了多个
</div>
v-for 补充 :key
v-for中的key是用于确定当前循环的唯一性，尽量不适用index，一般有id就绑id
<ul>
<li v-for="(r,i) in arr" :key="r.id">
{{r.name}}--{{r.id}}
</li>
</ul>
自定义指令
-
全局自定义命令
格式：
Vue.directive("指令名",{bind(e){},inserted(e){}}) -
局部自定义命令
格式：(在new Vue中写)
directives:{指令名:{bind(e){},inserted(e){}}}bind和inserted都是钩子函数
指令第一次被绑定时触发
e是挂载到的元素，e就相当于我们的DOM元素
},
inserted(e){
操作元素时触发
e是挂载到的元素，e就相当于我们的DOM元素
}
- 如何使用自定义命令
<div v-指令名></div>
当指令名为驼峰式时，aB===>v-a-b
<div v-click-change>点击一下吧</div>
<div v-change2>再点击一下吧</div>
</div>
<script>
var flag = 1;
// 全局自定义指令
Vue.directive("clickChange", {
bind(e) {
console.log(e);
e.innerText = "人约黄昏后";
},
inserted(e) {
e.onclick = () => {
console.log(e);
if (flag) {
e.innerText = "月上柳梢头"
flag = 0
} else {
e.innerText = "人约黄昏后";
flag = 1
}
}
}
})
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
},
// 局部自定义指令
directives: {
change2: {
bind(e) {
console.log(e);
e.innerText = "南风知我意"
},
inserted(e) {
e.onclick = () => {
console.log(e);
e.innerText = "吹梦到西洲"
}
}
}
}
});
</script>
过滤器
- 全局过滤器
Vue.filter("过滤器名称",function(e){}) - 私有过滤器（在new Vue中）
filters{
过滤器名称(e){
}
}
使用过滤器
{{变量 | 过滤器}}
这里的过滤器与数组迭代方法中的过滤是不同的，这里的过滤器是将传入的数据进行一系列的操作，再返回出来，更类似于数组迭代方法中的map方法。
<div id="app">
{{text | fmtText("这是","一首诗")}}
</div>
<script>
Vue.filter('fmtText', function(e,f,g){
return e+f+g
})
new Vue({
el: '#app',
data() {
return {
text:"满城尽带黄金甲"
}
},
methods: {
}
});
</script>
我们在进行调用的时候，过滤器名后面可以不加参数，它就是指向我们前面的变量，但是如果有多个参数，可以从案例中看到，第一个参数e我并没有写出来，它自己直接识别为前面的变量，后面的“这是”“一首诗”分别对应了f和g
过滤器中的函数可以放多个参数，但我们一般只放一个参数，用于指向我们的变量。
过滤器的功能目前来看是十分强大的，从后面我放的案例中也可以看出来，在处理数据格式上还是十分方便的
