vue双向绑定及过滤器

最新推荐文章于 2022-11-23 08:26:58 发布

孤风随雨

最新推荐文章于 2022-11-23 08:26:58 发布

阅读量730

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_47723644/article/details/109477521

版权

vue

v-model双向绑定

v-model作用

我们知道Vue的核心特性之一是双向绑定，vue的响应式原理是从数据到视图，比如我们之前学的v-text,v-html都是从数据层到视图层。接下来我们要学习从视图到数据的原理。
v-model是一个指令，只能在input、select、textarea、components等表单元素中使用。
v-model和v-text的使用方法一样但效果不同

<div id="app">
        <input type="text" v-model='msg'><br>
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'学习使我快乐'
            }
        })
    </script>

在这里插入图片描述

可以看到在修改输入框中的数据时，下面的数据也会发生变化，这是因为v-model是双向绑定的，修改数据层的数据会影响视图层而修改视图层也会影响数据层

v-model本质上是 :value和v-on的结合体，就是绑定他的value,通过v-on触发，从而更新数据

v-model小案例

下面我们使用v-model来实现一个简单的计算器功能

<div id="app">
        <!-- 因为v-model只能在表单中使用，所以使用input框 -->
        <input type="number" v-model='n1'>
        <select v-model='opt'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" v-model='n2'>
        <input type="button" value="=" @click='sum'>
        <input type="text" v-model='result'>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                n1:'',
                n2:'',
                opt:'+',
                result:''
            },
            methods: {
                sum(){
                    // 通过switch-case来判断运算符并选择运算方法
                    switch (this.opt){
                        case '+':
                            this.result=parseInt(this.n1)+parseInt(this.n2)
                            break;
                        case '-':
                            this.result=parseInt(this.n1)-parseInt(this.n2)
                            break;
                        case '*':
                            this.result=parseInt(this.n1)*parseInt(this.n2)
                            break;
                        case '/':
                            this.result=parseInt(this.n1)/parseInt(this.n2)
                            break;
                        default:break;
                    }
                }
            },
        })
    </script>

vue为元素增添样式

:class=’’

<style>
        .c1{
            color: blue;
        }
        .c2{
            font: 900;
        }
        .c3{
            font-size: 50px;
        }
        .c4{
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 通过v-bind直接绑定一个类 -->
        <p :class="c1">{{msg}}</p>
        <!-- 也可以通过数组的形式绑定多个类 -->
        <p :class="['c1','c2','c3']">{{msg}}</p>
        <!-- 也可以不在vue中的data中定义true，而在引用中通过对象形式来定义 -->
        <p :class="[{'c1':false},'c2','c3',{'c4':true}]">{{msg}}</p>
        <p :class="obj">{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'这是一个p标签',
                //在data中定义时，类的名称需要用‘’
                'c1':true,
                'c2':true,
                'c3':false,
                obj:{
                    //使用对象定义多个类的true/false时可以不用‘’
                    c1:true,
                    c3:true,
                    c4:true
                }
            }
        })
    </script>

在这里插入图片描述

:style=’’

<div id="app">
        <p :style="[obj1,obj2]">{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'这是p标签',
                obj1:{
                    color:'red',
                    'font-size':50+'px'
                },
                obj2:{
                    'font-weight':900
                }
            }
        })
    </script>

注意：在data中定义style样式时，要注意写法。带有-的属性要用‘ ’引起来，属性的值不是数字类型的话，要按照其对应的格式来写

v-for遍历

遍历数组

写法：v-for=‘item in list’
list为data中的数组，item为数组元素的别名

<div id="app">
        <p v-for='item in list'>
            {{item.name}}====={{item.age}}
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {name:'张三',age:15},
                    {name:'赵四',age:45},
                    {name:'王五',age:35}
                ]
            }
        })
    </script>

遍历对象

写法：v-for=’(value,key,index) in list’
其中list为data中的数组或对象，value为遍历出的对象的值，key为键值，index为索引值

<div id="app">
        <p v-for='(value,key,index) in obj'>
            {{value}}====={{key}}===={{index}}
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'王麻子',
                    age:45,
                    sex:'man'
                }
            }
        })
    </script>

遍历数字

<p v-for='item in 10'>
       {{item}}
</p>

in后面跟数字就是遍历1到该数字的所用数字

v-show/if

v-show控制显示隐藏
v-if控制删除与生成

<div id="app">
		//v-show和v-if通过data中定义的flag对应的true或false来控制
        <input type="button" value="点我" @click='flag=!flag'>
        <p v-show='flag'>{{msg}}</p>
        <p v-if='flag'>{{msg2}}</p>
    </div>  
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'我是show',
                msg2:'我是if',
                flag:true
            }
        })
    </script>

图书管理案例

在之前的学习中，我们使用nodejs实现了图书管理系统，接下来我们用vue的方法来实现它

<div id="app">
        <table class="table table-border">
            <thead>
                <tr> id:<input type="text" v-model='id' ></tr>
                <tr> name:<input type="text" v-model='name' ></tr>
                <tr> <input type="button" value="添加" @click="add"></tr>
                <tr> 搜索关键字：<input type="text" v-model='keywords'></tr>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>ctime</th>
                    <th>opt</th>
                </tr>         
            </thead>
            <tbody>
                <tr v-for='item in sear(keywords)' :key='item.id'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td><a href="" @click.prevent='del(item.id)'>删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
       
        new Vue({
            el:'#app',
            
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'郭靖',ctime:new Date()},
                    {id:2,name:'杨过',ctime:new Date()},
                    {id:3,name:'张无忌',ctime:new Date()}
                ]
            },
            methods: {
                del(id){
                    this.list.forEach((i,index)=>{
                        if(i.id==id){
                            this.list.splice(index,1)
                            console.log(i.index);
                        }
                    })
                },
                add(){
                    var obj = {
                        id:this.id,
                        name:this.name,
                        ctime:new Date()
                    }
                    this.list.push(obj)
                    this.id=''
                    this.name=''
                },
                sear(key){
                    return this.list.filter(item=>{
                        if(item.name.includes(key)){
                            return item
                        }
                    })
                }
            },
        })
    </script>

这里我们我们使用的数据是假数据，即在data中定义的数据，后面我们会学习调用数据库。
在上面的代码中，我们加入了搜索关键字的功能，

sear(key){
                    return this.list.filter(item=>{
                        if(item.name.includes(key)){
                            return item
                        }
                    })

在这个方法中，我们使用了filter函数获取符合条件的数据，有使用includes()方法筛选包含关键字的数据。最后使用v-for方法将数据渲染到页面上。

<tr v-for='item in sear(keywords)' :key='item.id'>

在v-for方法中遍历的必须是数组，而我们在这里使用了一个函数，这是因为这个函数执行完后的返回值是数组

过滤器：filter

全局过滤器

定义全局过滤器的语法结构：Vue.filter(‘过滤器的名称’,function(){})
它在所有的vue项目中都能使用
使用方法：{{dataname | ‘过滤器的名称’}}

<div id="app">
        <p>{{msg | replace('学习')}}</p>
    </div>
    <script>
        Vue.filter('replace',(msg,str)=>{
            console.log(msg);
            return msg.replace(/玩游戏/g,str)
        })
        new Vue({
            el:'#app',
            data:{
                msg:'我喜欢玩游戏，他也喜欢玩游戏'
            }
        })
    </script>

在filter过滤器中定义的function，第一个参数已经规定死了, 永远都是过滤器管道符前面传递过来的数据。

私有过滤器

私有过滤器(局部过滤器)
filters属性定义私有的过滤器: 过滤器有两个条: 过滤器名称和处理函数

new Vue({
            el:'#app1',
            data:{
                msg1:new Date()
            },
            filters:{
                dateFormat:function(msg1){
                    var dt=new Date(msg1);
                    var y=dt.getFullYear();
                    var m=(dt.getMonth()+1).toString().padStart(2,'0');
                    var d=dt.getDate().toString().padStart(2,'0');
                    var hh=dt.getHours().toString().padStart(2,'0');
                    var mm=dt.getMinutes().toString().padStart(2,'0');
                    var ss=dt.getSeconds().toString().padStart(2,'0');
                    return `${y}年${m}月${d}日 ${hh}:${mm}:${ss}`
                }
            }
        })

局部过滤器要在new vue({ })中定义，全局过滤器在整个js定义。

自定义指令：directive

自定义指令与定义过滤器大体相同，它需要用到Vue.directive(‘指令名称’，{钩子函数(可以为一个或多个)})。

指令定义函数提供了几个钩子函数（可选）：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用

钩子函数的参数有：
el: 指令所绑定的元素，可以用来直接操作 DOM 。

binding: 一个对象，包含以下属性：

name: 指令名，不包括 v- 前缀。
value: 指令的绑定值，例如： v-my-directive=“1 + 1”, value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

vnode: Vue 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

<div id="app">
        <p v-color="'blue'" v-fontweight='900'>{{msg}}</p>
    </div>
    <script>
        //定义全局指令
        Vue.directive('color',{
            bind:(el,binding)=>{      // 每当指令绑定在元素上的时候, 会立即执行这个bind函数,只执行一次
            el.style.color=binding.value
        }
        })
        new Vue({
           el:'#app',
           data:{
               msg:'你好',              
           },
           //定义私有指令
           directives:{
                'fontweight':{
                    bind:(el,binding)=>{
                        //若要使用带有-连字符的属性，需要将连字符后的那个字母改为大写
                        el.style.fontWeight=binding.value
                    }
                }
           }
        })
    </script>
    ```

孤风随雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue双向绑定及过滤器

vuev-model双向绑定v-model作用v-model小案例vue为元素增添样式:class='':style=''v-for遍历遍历数组遍历对象遍历数字v-show/if二级目录二级目录二级目录二级目录v-model双向绑定v-model作用我们知道Vue的核心特性之一是双向绑定，vue的响应式原理是从数据到视图，比如我们之前学的v-text,v-html都是从数据层到视图层。接下来我们要学习从视图到数据的原理。v-model是一个指令，只能在input、select、textarea、co
复制链接

扫一扫