vue中的局部过滤器和全局过滤器代码实操

Frieda ·

更新时间:2024-11-11

· 1064 次阅读

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 过滤器

1024 个赞