// An highlighted block
<template>
<view class="">
<!--语法(1) ?? -->
<view @click='handleData()'>点击</view>
<!-- 语法(2) ?. -->
<view @click='handle1()'>可选链</view>
<!-- 语法(2) 对象-->
<view :class="{'red':colorId==0,'green':colorId==1,'purple':colorId==2}">这是一段很长的文字</view>
<!-- 语法(3) 三木-->
<view :class="colorId==0?'red':colorId==1?'green':'purple'">两段很长的文字</view>
</view>
</template>
<script>
export default{
data() {
return{
colorId:0,
// title:'问号符',
//title:null,
title:undefined,
obj:{
// name:'开始编译,请耐心等待',
//name:undefined,
name:null
},
}
},
methods:{
handleData(){
//(1) ??符号用途:this.title??'' 如果左边是null|| undefined 则用右边的值
//空值合并运算符-作用:去掉null || undefined
let res = this.title??''
console.log('===>',res)
console.log(typeof(res))
//如果obj.name是null || undefined,结果就是''; 否则就是
let name = this.obj?.name??''
console.log('--->',name)
console.log('---->',typeof(name))
},
handle1(){
// (2) 有当a存在,同时a具有name属性的时候,才会把值赋给b,
//否则就会将undefined赋值给b.重要的是,不管a存在与否,这么做都不会报错.
//可选链-作用: ?.
let a,b;
b = a?.name
console.log('b==>',b) //undefined
//(3) ! 和 !!
let c = 1
console.log(!c) //false 取反
console.log(!!c) //true 取正
},
},
}
</script>
<style>
.red{
color: red;
}
.green{
color: green;
}
.purple{
color: purple;
}
</style>
js中一些奇奇怪怪的符号
最新推荐文章于 2022-06-01 16:47:50 发布