vue中的局部过滤器和全局过滤器代码实操
v-model：绑定的value
v-bind：绑定的type
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<div v-show="showInput">
<p>请选择自己的性别：</p>
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女
</div>
<div v-if="showInput">
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女
</div>
<div v-else>
<p>请自行输入自己的性别：</p>
<input v-bind:value="sex" type="text" placeholder="请输入其他内容 "/>
<input :value="sex" :type="button"/>
</div>
<input type="button" value="click me" v-on:click="clikeme">
<input type="button" value="显示/隐藏radio" @click="showInput=!showInput">
<div>
<input type="text" v-model="inputText" placeholder="请输入内容" />
<input type="text" v-model="inputText" placeholder="请输入内容" />
<p>{{ inputText|checkIsNullorEmpty }}</p>
</div>
<div>
<input v-model="sexText" type="radio" name="sex" value="man" /> 男
<input v-model="sexText" type="radio" name="sex" value="woman" /> 女
<p>您选择的性别为： {{ sexText }}</p>
<p>您选择的性别为： {{ sexText|sexFilter }}</p>
</div>
<div>
<p v-for="(a,b) in dataList">{{b}},{{a}}</p>
<p v-for="a in dataList">{{a}}</p>
</div>
<div>
<select v-model="selectValue" name="name" id="name">
<option v-for="(item,index) in dataList" :value="index"> {{ item }}</option>
</select>
<p> 选中的用户是：{{ selectValue|selectFilter(dataList) }}</p>
</div>
</div>
<script>
// js的注释
// console.log("11111")
const vm = new Vue({
el: '#app', // el代表vue主体
// eslint编码规范
// 定义参数的时候，值必须用单引号
// 方法名和括号之间需要一个空格
// 如果有 多个参数，逗号后面需要一个空格
data () {
return {
msg: '这是一段信息',
showInput: true,
sex: '我也不知道',
button: 'button',
inputText: '',
sexText: '',
dataList: [
'xiaozhang',
'xiaowang',
'xiaohong'
],
selectValue: 0
}
},
methods: {
clikeme() {
console.log("abcd")
}
},
filters: {
// 有参过滤器，有参过滤器的参数是被修饰的那个值自身+传递的参数
selectFilter:function (sid,dataList){
console.log('sid:',sid)
console.log(dataList)
return dataList[sid]
},
// 无参过滤器，无参过滤器的参数是被修饰的那个值自身
checkIsNullorEmpty(val){
if (val === null || val === ''){
return '暂无数据'
} else {
return val
}
},
sexFilter(sex){
if(sex === 'man'){
return '男性'
} else if (sex === 'woman'){
return '女性'
}
}
}
})
</script>
</body>
</html>
全局过滤器：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<div v-show="showInput">
<p>请选择自己的性别：</p>
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女
</div>
<div v-if="showInput">
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女
</div>
<div v-else>
<p>请自行输入自己的性别：</p>
<input v-bind:value="sex" type="text" placeholder="请输入其他内容 "/>
<input :value="sex" :type="button"/>
</div>
<input type="button" value="click me" v-on:click="clikeme">
<input type="button" value="显示/隐藏radio" @click="showInput=!showInput">
<div>
<input type="text" v-model="inputText" placeholder="请输入内容" />
<input type="text" v-model="inputText" placeholder="请输入内容" />
<p>{{ inputText|checkIsNullorEmpty }}</p>
</div>
<div>
<input v-model="sexText" type="radio" name="sex" value="man" /> 男
<input v-model="sexText" type="radio" name="sex" value="woman" /> 女
<p>您选择的性别为： {{ sexText }}</p>
<p>您选择的性别为： {{ sexText|sexFilter }}</p>
</div>
<div>
<p v-for="(a,b) in dataList">{{b}},{{a}}</p>
<p v-for="a in dataList">{{a}}</p>
</div>
<div>
<select v-model="selectValue" name="name" id="name">
<option v-for="(item,index) in dataList" :value="index"> {{ item }}</option>
</select>
<p> 选中的用户是：{{ selectValue|selectFilter(dataList) }}</p>
</div>
<div>
<p>{{count|miao}} </p>
<input type="button" value="add add" @click='addValue'/>
</div>
</div>
<script>
Vue.filter('miao',function(val)
{ return val+=val
})
// js的注释
Vue.filter('add',function(val){ val+=val
}) // console.log("11111")
const vm = new Vue({
el: '#app', // el代表vue主体
// eslint编码规范
// 定义参数的时候，值必须用单引号
// 方法名和括号之间需要一个空格
// 如果有 多个参数，逗号后面需要一个空格
data () {
return {
msg: '这是一段信息',
showInput: true,
count:0,
sex: '我也不知道',
button: 'button',
inputText: '',
sexText: '',
dataList: [
'xiaozhang',
'xiaowang',
'xiaohong'
],
selectValue: 0
}
},
methods: {
clikeme() {
console.log("abcd")
},
addValue(){
this.count+=1
}
},
filters: {
// 有参过滤器，有参过滤器的参数是被修饰的那个值自身+传递的参数
selectFilter:function (sid,dataList){
console.log('sid:',sid)
console.log(dataList)
return dataList[sid]
},
// 无参过滤器，无参过滤器的参数是被修饰的那个值自身
checkIsNullorEmpty(val){
if (val === null || val === ''){
return '暂无数据'
} else {
return val
}
},
sexFilter(sex){
if(sex === 'man'){
return '男性'
} else if (sex === 'woman'){
return '女性'
}
}
}
},
)
</script>
</body>
</html>
到此这篇关于vue中的局部过滤器和全局过滤器代码实操的文章就介绍到这了,更多相关vue中的局部过滤器和全局过滤器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue.js 的过滤器你了解多少
目录 一.过滤器作用 二.过滤器的使用方式 三.过滤器的分类 四.全局过滤器 五.局部过滤器 六.全局过滤器和局部过滤器重名现象 总结 一.过滤器作用 过滤器用于进行文本内容格式化处理. 二.过滤器的使用方式 过滤器可以在插值表达式和 v-bind 中使用. 三.过滤器的分类 全局过滤器 局部过滤器 四.全局过滤器 全局过滤器可以在任意Vue实例中使用. 语法书写方式如下: Vue.filter('过滤器名称',function(value) { //逻辑代码 return '处理结果'; })
-
vue 过滤器和自定义指令的使用
过滤器 01. 是什么 过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果 过滤器不会修改数据 过滤器的本质是函数 过滤器函数应该有参数,参数必须包含你想进行处理的源数据 过滤器应该有返回值,返回处理后的结果 export default { // 通过filters创建局部过滤器 filters:{ 过滤器名称(data){ // 对传入的data 进行处理 return 处理结果 } } } 02. 怎么做 (1)定义过滤器 局部过滤器:定义在组件内部,只能在当前组件内使用 通过fi
-
vue3删除过滤器的原因
什么是vue的过滤器 过滤器可以通俗理解成是一个特殊的方法,用来加工数据的 比如枚举值可以使用过滤器:如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器,将价格格式化成小数点两位 比如时间格式化等 详细请看官方文档 why? 笔者认为:原因就是vue3要精简代码,并且filter功能重复,filter能实现的功能,methods和计算属性基本上也可以实现.所以就干脆把filter这方面的vue源码给删掉,这样的话,更加方便维护. 举例分析 需求描述 假设我们有一个快递信
-
Vue之过滤器详解
<body> <div id="root"> <h2>显示格式化后的时间</h2> <!-- 计算属性实现 --> <h2>现在是{{fmtTime}}</h2> <!-- methods实现 --> <h2>现在是{{getFmtTime()}}</h2> <!-- 过滤器时间实现--> <h2>现在是{{time | timeFormate
-
关于Vue中过滤器的必懂小知识
目录 前言 什么是过滤器 如何使用过滤器 全局过滤器 局部过滤器 过滤器可以串联 总结 前言 大家好,今天来分享下Vue中的过滤器小知识 什么是过滤器 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 如何使用过滤器 全局过滤器 本案例是过滤价格中的￥和元 示例 ￥1999.00元 定义一个capitalize方法,传入value值 如果value为空返回空字符串 否则就叠加字符串"
-
Vue的过滤器你真了解吗
目录 1.过滤器 1.1对过滤器的理解 1.2全局过滤器: 1.3局部过滤器: 1.4过滤器的案例 总结 1. 过滤器 案例中使用到时间格式相关API 1.1 对过滤器的理解 定义:对要显示的数据进行特定格式化后在显示 适用:做一些简单的逻辑处理 特点:滤器可以做一些简单操作,并且没有改变原来的数据,产生新的对应的数据 1. 语法 : data | 过滤器 不传参数默认将data值传入,并且自动调用函数,函数可接收到value 传参数并不会覆盖掉第一个参数,第一个参数默认是value
-
vue中的局部过滤器和全局过滤器代码实操
v-model:绑定的value v-bind:绑定的type <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ msg }}</p&g
-
封装一个vue中也可使用的uniapp的全局弹窗组件(任何页面都可以弹出)
目录 效果图: 场景: 思路: 第一步: 第二步: 第三部:使用 总结 效果图: 场景: 当你对接websocket时,或者轮询也好,你需要获取到最新的信息,并且在任何页面弹出一个组件进行后续操作 思路: 1.先封装好要弹出的公共组件 2.向vue原型上挂载全局方法,拿到组件真实dom,从而对组件进行显隐操作 第一步: 创建一个公共组件,以下是组件全部的结构及样式,你需要把html中的两个image标签的路径换掉或者直接注释掉也行,html 和 css就不做解释了 invite.vue <tem
-
Vue中的组件及路由使用实例代码详解
1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>
-
详解vue中使用transition和animation的实例代码
以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10
-
vue中for循环更改数据的实例代码(数据变化但页面数据未变）
废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl
-
vue中的面包屑导航组件实例代码
vue的面包屑导航组件 用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat
-
vue中组件的过渡动画及实现代码
1. 和多个元素的过渡一样,用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </style> </head> <body> <div id="demo"> <button @click=&q
-
vue 中动态绑定class 和 style的方法代码详解
先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,
-
Vue中的局部组件介绍
在Vue中我们可以自己定义(注册)局部组件 定义组件名的方式: var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } 然后在 components 选项中定义你想要使用的组件: new Vue({ el: '#app', // 组件中心 components: { // 在视图层渲染 局部注册组件时 // component-a:你要在视图层调用时使用的名称 // ComponentA: 局部注册组件名称 'component
-
vue中七牛插件使用的实例代码
本文介绍了vue中七牛插件使用,我也正在学习,分享给大家,顺便留个笔记,废话不说了,如下: <template> <div id="cxUpload" class="cx-upload"> <button id="pickfiles" class="uploadBtn">上传</button> </div> </template> <script&g