<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">{},{{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="請輸入其他內容 "/>?
? ? ? ? <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">{},{{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>

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

您可能感興趣的文章: