computed: { rules () { return { //账号 username: [ { required: true, 'validator': checkUserName, trigger: 'blur' } ],这是什么意思
时间: 2023-06-02 16:03:40 浏览: 77
这段代码显示的是Vue组件中的computed属性,其中rules方法返回一个对象,其中包含一个叫做username的验证规则数组。该验证规则数组包含一个必填规则和一个自定义的checkUserName验证器规则,当用户的输入框失焦时触发验证。
相关问题
new Vue({ el: '#member-add-app', data() { return { id: '', actionType : '', ruleForm : { 'name': '', 'phone': '', 'sex': '男', 'idNumber': '', username: '' } } }, computed: { rules () { return { //账号 username: [ { required: true, 'validator': checkUserName, trigger: 'blur' } ], //姓名 name: [{ required: true, 'validator': checkName, 'trigger': 'blur' }], 'phone': [{ 'required': true, 'validator': checkPhone, 'trigger': 'blur' }], 'idNumber': [{ 'required': true, 'validator': validID, 'trigger': 'blur' }] } } },解释一下这段代码
这段代码是Vue.js创建实例的一部分,其中el属性指定了Vue实例所挂载的根元素。具体来说,el属性的值是一个CSS选择符,用于指定Vue实例所管理的DOM元素。在这个示例代码中,el属性的值是一个选择器字符串,代表Vue实例所管理的根元素是id为app的元素。
vue里 computed:
在Vue中,computed是一种计算属性,它可以根据已有的数据计算出新的数据。computed的值会被缓存,只有当依赖的数据发生变化时才会重新计算。下面是一个例子:
```javascript
<template>
<div>
<p>商品价格:{{ price }}</p>
<p>商品折扣价:{{ discountPrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
originalPrice: 100,
discount: 0.8
}
},
computed: {
price() {
return this.originalPrice
},
discountPrice() {
return this.originalPrice * this.discount
}
}
}
</script>
```
在上面的例子中,我们定义了两个计算属性price和discountPrice,它们分别计算商品的原价和折扣价。当originalPrice或discount发生变化时,discountPrice会重新计算。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)