vue(v-bind修改样式属性、自定义命令、过滤器filter)

牛仔很会忙

已于 2022-06-24 08:59:52 修改

阅读量1.9k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-06-23 22:56:59 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66970189/article/details/125426578

版权

本文深入探讨了Vue.js中的v-bind使用，包括修改属性、样式及类名，强调其非双向绑定特性。此外，详细讲解了自定义指令的创建与使用，以及过滤器的定义与应用。通过一个实际案例展示了如何利用v-for、v-bind和过滤器实现动态数据渲染和搜索功能，强调了Vue.js减少DOM操作的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
        }

js代码

 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"
                }
            }
        });

v-bind 使用格式

用于修改行内属性
格式：v-bind:属性名='变量'
简写：`:属性名=‘变量’

        <button @click="changeSrc">切换图片</button> <br>
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="">

注意：

不是双向绑定，只修改属性值
尽量不要和v-model一起使用，value和v-model赋不一样的值时，会发生冲突
声明v-bind之后，出数字、特殊字符外，只能通过data数据获取内容，所以我们尽量都在v-bind里写变量就可以了

style改变样式

合并在一起写：将样式以对象的形式存在data中，style中直接调用
拆分每个变量，在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},变量名]

        <!-- class后面写对象格式  {class名：布尔值} -->
        <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都是钩子函数

bind(e){
	指令第一次被绑定时触发
	e是挂载到的元素，e就相当于我们的DOM元素
},
inserted(e){
	操作元素时触发
	e是挂载到的元素，e就相当于我们的DOM元素
}

如何使用自定义命令
<div v-指令名></div>
当指令名为驼峰式时，aB===>v-a-b

    <div id="app">
        <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

过滤器中的函数可以放多个参数，但我们一般只放一个参数，用于指向我们的变量。

过滤器的功能目前来看是十分强大的，从后面我放的案例中也可以看出来，在处理数据格式上还是十分方便的

总结

今日所学大概分为三大点：v-bind修改样式属性、自定义命令以及过滤器，v-bind中的内容还是很多的，但是常用的也就是那几个，比如给标签修改属性（：src=“imgSrc”）、给元素添加样式（：style=“变量名”）、修改元素的类名（：class=“变量名”、：class=“[变量名1，变量名2]”）。自定义命令使用比较少，过滤器的强大之处要在实践中才能看出来，这就上案例

功能：按要求输入品牌名称和评价以后，点击添加，会在表格下新增内容，在搜索框输入内容以后，搜索的内容会被渲染出来

html和js代码

<div id="app">
        <span class="menu">名称</span>
        <input type="text" v-model="phoneName">
        <span class="menu">评价</span>
        <select v-model="comment">
            <option value="4">很好</option>
            <option value="3">一般</option>
            <option value="2">较差</option>
            <option value="1">极差</option>
        </select>
        <button @click="add">添加</button>
        <!-- 搜索框 -->
        <span class="menu">搜索</span>
        <input type="text" v-model="searchText">
        <br>
        <table>
            <th>名称</th>
            <th>评价</th>
            <th>时间</th>
            <th>操作</th>
            <tbody>
                <!-- tbody不是单纯地获取数据库arr里的内容，我们通过给搜索框进行数据双向绑定，能够实现搜索内容的实时传输，下面的循环就能够实时获取到，需要渲染出来的内容 -->
                <tr v-for="(r,i) in search(searchText)">
                    <td>{{r.name}}</td>
                    <td>{{r.pj | fmtComment}}</td>
                    <td>{{r.ctime | fmtTime}}</td>
                    <td><button @click="del(i)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 过滤器，将评价里的数字转换为文字
        Vue.filter("fmtComment", function (e) {
            if (e == 1) return "极差"
            if (e == 2) return "较差"
            if (e == 3) return "一般"
            if (e == 4) return "很好"
        });
        // 过滤器，将时间格式进行调整
        Vue.filter("fmtTime", function (e) {
            let oMonth = (e.getMonth() + 1) < 10 ? "0" + (e.getMonth() + 1) : (e.getMonth() + 1);
            return e.getFullYear() + "年" + oMonth + "月" + e.getDate() + "日" + e.getHours() + ":" + e.getMinutes() + ":" + e.getSeconds()
        })
        // 创建实例
        new Vue({
            el: '#app',
            data() {
                return {
                    // 品牌名
                    phoneName: "",
                    // 评价
                    comment: "",
                    // 搜索框文字
                    searchText: "",
                    arr: [
                        {
                            id: 1,
                            name: "华为",
                            ctime: new Date(),
                            pj: "1",

                        }, {
                            id: 2,
                            name: "小米",
                            ctime: new Date(),
                            pj: "3"
                        }
                    ],

                }
            },
            methods: {
                // 点击添加的函数
                add() {
                    if (this.comment && this.phoneName) {
                        this.arr.push({
                            name: this.phoneName,
                            ctime: new Date(),
                            pj: this.comment
                        })
                    }
                },
                // 点击删除的函数
                del(i) {
                    this.arr.splice(i, 1)
                },
                // 实时返回符合条件的内容
                search(i) {
                    return this.arr.filter(r => {
                        return r.name.includes(i)
                    })
                }
            }
        });
    </script>

css代码

        #app {
            width: 600px;
            margin: 100px auto;
        }

        table {
            width: 100%;
            text-align: center;
            border: 1px solid;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th,
        td {
            height: 40px;
            line-height: 40px;
            border: 1px solid;
        }

直到做完这个案例，我才明白为什么说vue的dom操作更少，的确从这整个案例中可以看出来，我们一直在对arr数据进行一个添加和删除，但是操作数据还有着很多很多的注意点等着我们去发现。就比如今天做搜索框的功能时，卡壳了很久，之前的想法一直是给这个搜索框绑定一个事件，由这个事件去修改arr里的数据，结果虽然能做到输入什么就渲染出相关的内容，但是再想渲染出原来的数据就办不到了。后面再彭大神的指导下，才明白以上的一个做法，在此要特别鸣谢我的好儿子：彭神