vue全局过滤器，vue父组件如何向子组件传递布尔值，vue父组件调用子组件方法，setInterval

vue全局过滤器的使用

首先是在src目录下新建filters文件，文件里面是index.js

export function price(num){
    if(num==0){
        return num ="免费"
    }else{
        var a = num/100
        return a.toFixed(2)
    }
}

配置main.js文件

//先引入
import * as filters from './filters'
//再配置
Object.keys(filters).forEach(key => {
  console.log('key:', filters[key])
  Vue.filter(key, filters[key])//注意：filter不是fillters
})

调用

<div class="kecheng_bottom_price">{{items.price | price}}</div>

vue父组件如何向子组件传递布尔值

vue页面中

   <Input
        placeholder="请输入手机号"
        type="number"
        width="230"
        v-bind:show_right="true"
        right_value="获取验证码"
        v-on:getvalue="getphone"
        v-on:clickright="sendcode"
        ref="input_phone"
      />

子组件中

props:{
      show_right: {
      type: Boolean
    }
}

与普通的传值不一样这个布尔值需要用v-bind来

vue父组件调用子组件方法

      <Input
        placeholder="请输入手机号"
        type="number"
        width="230"
        v-bind:show_right="true"
        right_value="获取验证码"
        v-on:getvalue="getphone"
        v-on:clickright="sendcode"
        ref="input_phone" //绑定ref以便于下面获取子组件的方法
      />

	methods:{
          sendcode() {
      var flag = /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/;
      var ph = this.phone
      if (flag.test(this.phone)) {
        this.$toast.success("发送成功，注意查收");
        this.$refs.input_phone.chanrgeright()//通过refs来获取到子组件的方法
        this.phone = ph
      } else {
        this.$toast.fail("请输入正确手机号");
      }
    }
	}

子组件中

    chanrgeright() {
     
    }

第一步先给父组件中的子组件标签绑定ref

第二步利用refs来找到子组件中方法并调用

window.setInterval

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

var myVar;
 
function myFunction() {
    myVar = setInterval(alertFunc, 3000);
}
 
function alertFunc() {
    alert("Hello!");
}

利用setinterval实现的效果

data:{
  return{
          flag: false,
      totaltime: 5
  }
}

    chanrgeright() {
      //设置一个简单的节流
      // 默认为  false 
      if (this.flag) return
      //控制样式的改变
      this.flag = true;
      //设置一个倒计时
      var a = window.setInterval(() => {
        //每秒减一
        this.totaltime--;
        //如果减到了0就给总计时加到5
        //清除计时器
        //改变flag来改变样式
        if (this.totaltime < 0) {
          this.totaltime = 5;
          window.clearInterval(a);
          this.flag = false;
        }
      }, 1000);
    }