isShow = isShow ? "" : dom["props"]["class"] += " fd-hide";和isShow ? "" : dom["props"]["class"] += " fd-hide";有什么区别
时间: 2024-03-02 15:47:17 浏览: 18
isShow = isShow ? "" : dom["props"]["class"] += "-hide";
这段代码是一个三元运算符,根据isShow的值来决定是否执行后面的操作。如果isShow为真,则将空字符串赋值给isShow,否则将" fd-hide"添加到dom对象的props属性的class属性中。
isShow ? "" : dom["props"]["class"] += " fd-hide";
这段代码也是一个三元运算符,但是操作的顺序稍有不同。如果isShow为真,则不执行任何操作,否则将" fd-hide"添加到dom对象的props属性的class属性中。
两段代码的区别在于操作的顺序和赋值的对象。第一段代码先赋值给isShow,然后再修改dom对象的属性;而第二段代码先判断isShow的值,然后再根据判断结果来修改dom对象的属性。
相关问题
vue3 props类型标注
在Vue3中,可以使用以下方式标注props的类型:
1. 使用类型标注
```
props: {
msg: String,
age: Number,
isShow: Boolean,
items: Array,
person: Object
}
```
2. 使用对象形式的类型标注
```
props: {
msg: {
type: String
},
age: {
type: Number
},
isShow: {
type: Boolean
},
items: {
type: Array
},
person: {
type: Object
}
}
```
3. 使用默认值和类型标注
```
props: {
msg: {
type: String,
default: 'Hello World'
},
age: {
type: Number,
default: 18
},
isShow: {
type: Boolean,
default: true
},
items: {
type: Array,
default: () => []
},
person: {
type: Object,
default: () => {}
}
}
```
注意:在Vue3中,props的默认值需要使用函数返回值来指定,而不是直接赋值。
vue props 监听变化
在Vue中,可以使用`watch`选项来监听props的变化。根据引用,当需要监听基本类型的props变化时,可以直接在`watch`对象中定义一个与props同名的方法,然后在方法中执行相应的操作。例如,如果要监听一个名为`msg`的基本类型props的变化,可以这样定义:
```javascript
watch: {
msg(newVal, oldVal) {
// 执行相应的操作
console.log(newVal, oldVal);
}
}
```
当需要监听引用类型的props变化时,可以使用计算属性来获取引用类型的内部字段,然后再使用`watch`来监听该字段的变化。根据引用的示例,如果要监听一个名为`config`的引用类型props中的`role.isShow`字段的变化,可以这样定义:
```javascript
computed: {
isShow() {
return this.config.role.isShow;
}
},
watch: {
isShow(newVal, oldVal) {
// 执行相应的操作
console.log(newVal, oldVal);
}
}
```
如果需要深度监听对象或数组的变化,可以在`watch`对象中设置`deep: true`选项。根据引用的示例,如果要深度监听一个名为`config`的引用类型props的变化,可以这样定义:
```javascript
watch: {
config: {
handler(newVal, oldVal) {
// 执行相应的操作
console.log(newVal, oldVal);
},
deep: true
}
}
```
此外,根据引用和引用的示例,在子组件中监听传入的数据时,可以通过箭头函数和props来实现。例如,如果要监听一个名为`testStr`的基本类型props的变化,可以这样定义:
```javascript
watch: {
() => props.testStr,
(newVal, oldVal) => {
// 执行相应的操作
console.log('监听基本类型数据testStr');
console.log('new', newVal);
console.log('old', oldVal);
}
}
```
如果要监听一个名为`dataList`的引用类型props的变化,可以这样定义:
```javascript
watch: {
() => props.dataList,
(newVal, oldVal) => {
// 执行相应的操作
console.log('监听引用类型数据dataList');
console.log('new', newVal);
console.log('old', oldVal);
}
}
```<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue 中 props监听变化的几种方式](https://blog.csdn.net/a1056244734/article/details/122714811)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3使用watch监听props中的数据](https://blog.csdn.net/qq_26707497/article/details/131460109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)