vue中的局部過濾器和全局過濾器代碼實操

更新時間：2022年02月21日 09:58:29 作者：苗苗大佬

這篇文章主要分享的是vue中的局部過濾器和全局過濾器代碼實操，下面文章主要以代碼展現(xiàn)，具有一的的知識參考性，需要的小伙伴可以參考一下

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="請輸入其他內(nèi)容 "/>?
? ? ? ? <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="請輸入內(nèi)容" />
? ? ? ? ? <input type="text" v-model="inputText" placeholder="請輸入內(nèi)容" />
? ? ? ? ? <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">{},{{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編碼規(guī)范
? ? ? // 定義參數(shù)的時候，值必須用單引號
? ? ? // 方法名和括號之間需要一個空格
? ? ? // 如果有 多個參數(shù)，逗號后面需要一個空格
? ? ? data () {
? ? ? ? return {
? ? ? ? ? msg: ?'這是一段信息',
? ? ? ? ? showInput: true,
? ? ? ? ? sex: '我也不知道',
? ? ? ? ? button: 'button',
? ? ? ? ? inputText: '',
? ? ? ? ? sexText: '',
? ? ? ? ? dataList: [
? ? ? ? ? ? 'xiaozhang',
? ? ? ? ? ? 'xiaowang',
? ? ? ? ? ? 'xiaohong'
? ? ? ? ? ],
? ? ? ? ? selectValue: 0
? ? ? ? }
? ? ? },
? ? ? methods: {
? ? ? ? clikeme() {
? ? ? ? ? console.log("abcd")
? ? ? ? }
? ? ? },
? ? ? filters: {
? ? ? ? // 有參過濾器，有參過濾器的參數(shù)是被修飾的那個值自身+傳遞的參數(shù)
? ? ? ? selectFilter:function (sid,dataList){
? ? ? ? ? console.log('sid:',sid)
? ? ? ? ? console.log(dataList)
? ? ? ? ? return dataList[sid]
? ? ? ? },
? ? ? ? // 無參過濾器，無參過濾器的參數(shù)是被修飾的那個值自身
? ? ? ? checkIsNullorEmpty(val){
? ? ? ? ? if (val === null || val === ''){
? ? ? ? ? ? return '暫無數(shù)據(jù)'
? ? ? ? ? } 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="請輸入其他內(nèi)容 "/>?
? ? ? ? <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="請輸入內(nèi)容" />
? ? ? ? ? <input type="text" v-model="inputText" placeholder="請輸入內(nèi)容" />
? ? ? ? ? <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">{},{{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編碼規(guī)范
? ? ? // 定義參數(shù)的時候，值必須用單引號
? ? ? // 方法名和括號之間需要一個空格
? ? ? // 如果有 多個參數(shù)，逗號后面需要一個空格
? ? ? 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: {
? ? ? ? // 有參過濾器，有參過濾器的參數(shù)是被修飾的那個值自身+傳遞的參數(shù)
? ? ? ? selectFilter:function (sid,dataList){
? ? ? ? ? console.log('sid:',sid)
? ? ? ? ? console.log(dataList)
? ? ? ? ? return dataList[sid]
? ? ? ? },
? ? ? ? // 無參過濾器，無參過濾器的參數(shù)是被修飾的那個值自身
? ? ? ? checkIsNullorEmpty(val){
? ? ? ? ? if (val === null || val === ''){
? ? ? ? ? ? return '暫無數(shù)據(jù)'
? ? ? ? ? } else {
? ? ? ? ? ? return val
? ? ? ? ? }
? ? ? ? },
? ? ? ? sexFilter(sex){
? ? ? ? ? if(sex === 'man'){
? ? ? ? ? ? return '男性'
? ? ? ? ? } else if (sex === ?'woman'){
? ? ? ? ? ? return '女性'
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? },
)
? ?
? ? </script>
? </body>
</html>

到此這篇關(guān)于vue中的局部過濾器和全局過濾器代碼實操的文章就介紹到這了,更多相關(guān)vue中的局部過濾器和全局過濾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: