vue全局过滤器,vue父组件如何向子组件传递布尔值,vue父组件调用子组件方法,setInterval
vue全局过滤器的使用首先是在src目录下新建filters文件,文件里面是index.jsexport function price(num){if(num==0){return num ="免费"}else{var a = num/100return a.toFixed(2)}}配置main.js文件//先引入import * as filters from './filters'//再配置O
·
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);
}
更多推荐
已为社区贡献1条内容
所有评论(0)