Vue的指令与过滤器

shmilyzl

已于 2023-01-09 11:46:52 修改

阅读量87

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript Powered by 金山文档

于 2023-01-09 11:12:11 首次发布

本文链接：https://blog.csdn.net/weixin_44414452/article/details/128546542

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

指令的概念

指令是vue为卡发着提供的模板语法。

可以分为6大类：内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令、列表渲染指令

内容渲染指令

v-text：会覆盖标签中原本的内容

<body>
    <div id="app">
        <p v-text="username"></p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                username:'张蕾'
            }
        })
    </script>
</body>

{{ }}：叫做插值表达式，用于解决内容覆盖的问题

<body>
    <div id="app">
        <p>性别：{{sex}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                sex:'女'
            }
        })
    </script>
</body>

v-html：可以把带有标签的字符串，渲染成真正的HTML的内容

<body>
    <div id="app">
        <div v-html="info"></div>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                info:'<h4 style="color:red ;font-weight:bold;">欢迎大家学习</h4>'
            }
        })
    </script>
</body>

属性绑定指令

如果需要为元素的属性动态绑定值，可以使用v-bind

v-bind

<body>
    <id="app">
        <!-- v-bind可以简写为: -->
        <input type="text" v-bind:placeholder="tips">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
              tips:'请输入用户名'
            }
        })
    </script>
</body>

注意：在使用v-bind的时候，如果绑定的内容需要进行动态的拼接，则字符串的外面应该包裹单引号

<div :title="'box'+index">这是一个div</div>

事件绑定指令

v-on可以简写为@

<body>
    <div id="app">
        <p>count的值：{{count}}</p>
        <button v-on:click="add(1)">+1</button>
        <button v-on:click="add(2)">+2</button>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
               count:0
            },
            // 可以定义事件处理函数
            methods: {
                add(n){
                    // vm.count++   vm==this
                    this.count +=n
                }
            },
        })
    </script>
</body>

注意：原生的DOM对象又onclick、oninput、onkeyup等原生时间，替换为vue的事件绑定形式后分别为：v-on:click、v-on:input、v-on:keyup

事件对象Servent

<body>
    <div id="app">
        <p>count的值：{{count}}</p>
        <!-- 每次出发事件，会换一种背景颜色 如果count是偶数为红色，基数为不变 -->
        <button @click="add">+N</button>
        <!-- vue提供了内置变量，名称叫做$sevent,就是原生的DOM对象e -->
        <button @click="add1(1,$sevent)">+N1</button>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
               count:0
            },
            // 可以定义事件处理函数
            methods: {
                add(e){
                    // vm.count++   vm==this
                    this.count +=1
                    // 判断this.count的值
                    if(this.count%2==0){
                        e.target.style.backgroundColor='red'
                    }else{
                         e.target.style.backgroundColor=''
                    }
                },
                add1(n,e){
                    // vm.count++   vm==this
                    this.count +=n
                    // 判断this.count的值
                    if(this.count%2==0){
                        e.target.style.backgroundColor='red'
                    }else{
                         e.target.style.backgroundColor=''
                    }
                }
            },
        })
    </script>
</body>

事件修饰符：

在事件处理函数中调用event.preventDefalut()或者event.stopPropagation（）是非常常见的，因此vue提供了事件修饰符，常见的5个事件修饰符：

.prevent 阻止默认行为

<body>
    <div id="app">
        <!-- 绑定事件，在终端打印a被点击了 -->
      <a href="www.baidu.com" @click.prevent="show">跳转到百度</a>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                username:'张蕾',
                sex:'女',
                info:'<h4 style="color:red ;font-weight:bold;">欢迎大家学习</h4>'
            },
            methods: {
                show(){
                    console.log("a被点击了！")
                }
            },
        })
    </script>
</body>

.stop 阻止事件冒泡

<body>
    <div id="app">
        <!-- 绑定事件，在终端打印a被点击了 -->
      <a href="www.baidu.com" @click.prevent="show">跳转到百度</a>
      <hr>
      <div style="height: 150px; background-color: aqua;"@click="divHandler">
    <button @click.stop="btnHandler">按钮</button>
    </div>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                username:'张蕾',
                sex:'女',
                info:'<h4 style="color:red ;font-weight:bold;">欢迎大家学习</h4>'
            },
            methods: {
                show(){
                    console.log("a被点击了！")
                },
                divHandler(){
                    console.log("divHandler")
                },
                btnHandler(){
                    console.log("btnHandler")
                }
            },
        })
    </script>
</body>

.capture 以捕获模式触发当前事件处理函数

.once 绑定的时间只触发1次

.self 只有在event.target是当前元素自身时触发事件处理函数

按键修饰符：

@keyup

<body>
    <div id="app">
        <input type="text" @keyup.esc="clearInput">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
            },
            methods: {
                clearInput(e){
                    console.log("触发了ESC按钮")
                    e.target.value=''
                }
            },
        })
    </script>
</body>

双向绑定指令

v-model双向绑定指令，在不操作DOM的前提下，快速获取表单的数据。

注意：只有表单元素才能使用 input输入框、textarea、select

<body>
    <div id="app">
    <p>用户名：{{username}}</p>
    <input type="text" v-model="username">
    <hr>
    <!-- 使用的是v-bind 单向绑定 -->
    <input type="text" :value="username">
    <hr>
    <select v-model="city">
        <option value="">请选择城市</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">沈阳</option>
    </select>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                username:'zhanglei',
                city:2
            }
        })
    </script>
</body>

v-model的修饰符：

为了方便对用户输入的内容进行处理

.number:自动将用户的输入值转为数值类型

.trim：自动过滤用户输入的首尾空白的字符

.lazy：在“change”时而非input时更新

<body>
    <div id="app">
    <input type="text" v-model.number="n1">+ <input type="text" v-model.number="n2">=<span>{{ n1+n2}}</span>
    <hr>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                n1:1,
                n2:2
            }
        })
    </script>
</body>

条件渲染指令

当开发者按需控制DOM的显示与影藏

v-if：原理是每次动态创建或者移除元素，来实现元素的显示和隐藏。（初始状态为false，默认不需要显示的时候，可以使用）

v-show:原理是动态为元素添加或者移除display：none样式，来实现元素的显示和隐藏（如果需要频繁的切换元素的显示状态，可以使用）（v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。）

<body>
    <div id="app">
        <button v-on:click="isFalse">false</button>
        <p v-if="flag">这是被v-if控制元素</p>
         <p v-show="flag">这是被v-show控制元素</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                // 如果flag为true，则显示被控制的元素，如果为false为隐藏
                flag:true
            },
            methods: {
                isFalse(){
                    this.flag=false
                }
            },
        })
    </script>
</body>

列表渲染指令

v-for

<body>
    <div id="app">
        <table>
            <thead>
                <th>索引</th>
                <th>id</th>
                <th>姓名</th>
            </thead>
            <tbody>
                 <tr v-for="(item,index) in list"  :key="item.id" :title="item.name">
                    <td>{{index+1}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:"张1"},
                    {id:2,name:"张2"},
                    {id:3,name:"张3"},
                    {id:4,name:"张4"},
                    {id:5,name:"张5"},
                    {id:6,name:"张6"}
                ]
            }
        })
    </script>
</body>

key的注意事项：