vue基础实践: filter过滤器单词首字母大写

时间 2020-07-13 标签 vue 基础实践 filter 过滤器单词首字母大写

vue基础实践: filter过滤器单词首字母大写

多种方式实现单词首字母大写反转javascript

单词首字母大写（正则）

词首字母大写（第二种方式写一个方法）

单词首字母大写（第二种方式vue过滤器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> [v-cloak] { display:none } </style>
</head>
<body>
    <!-- 需求1：单词首字母大写（正则） -->
       <div id="app">
           <input type="text" placeholder="请输入内容" v-model="text">
           <br>
           <!-- 单词首字母大写（第一种方式正则实现） -->
           <!-- <span v-text='text.replace(/\b[a-zA-Z]+\b/g,item=>{return item.charAt(0).toUpperCase()+item.substring(1); })'></span> -->

            <!-- 单词首字母大写（第二种方式写一个方法） <span v-text='toUp(text)'></span> -->
            <!-- 单词首字母大写（第二种方式vue过滤器） 过滤器的语法：按照竖线分开，把竖线左侧的值传递给右侧的值的过滤器方法，通过方法的处理，把处理后的结果展现在视图里 过滤器方法，只能在胡子语法{{}}和v-bind使用，由于过滤器方法没有挂载实例上 --> 
            <span v-cloak>{{text | filterA | filterB}}</span> 
            <img :src="pic | picHandle" alt="">
       </div>
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script> let vm = new Vue({ el:'#app', data:{ //=>响应式数据：data中的准备的要在视图中渲染的数据（model） text:'', pic:'' }, methods:{ //=>都会挂载到实例，不能和data中的属性名冲突：这里的制定的方法是普通方法，能够在视图中调取使用，也能够在其余方法中调取使用 toUp(value){ return value.replace(/\b[a-zA-Z]+\b/g,item=>{ return item.charAt(0).toUpperCase()+item.substring(1); }); } }, filters :{ //=>设置过滤器：把须要在视图中渲染的数据进行二次或者屡次的处理 filterA(value) { //=> 须要过滤的数据 return返回的事过滤后的结果 return value.replace(/\b[a-zA-Z]+\b/g,item=>{ return item.charAt(0).toUpperCase()+item.substring(1); }); }, //反转首字母大学 filterB(value) { return value.split('').reverse().join(''); }, picHandle(value){ return value.length===0?'http://wwww.baidu.com':value; } } }); </script>
</html>

运行结果以下：
css