第二类数字（Number）的操作
2.1普通数字的显示
vue中直接显示
<template>
<div>
<h3>学习Vue</h3>
<div>
{{ num }}
</div>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue"
const num = ref(10)
</script>
Harmony中 有数据类型的约束，是有数字类型的组件中才有用，也不能直接使用
错误一
错误二 Text组件只能放字符串
正确的写法 Text里面接受字符串 height里面接受数字类型 鸿蒙中是强语言数据类型
@Entry
@Component
struct MyString {
@State num:number = 10
build() {
Column() {
Text(`${this.num}`).height(this.num)
}
.height('100%')
.width('100%')
}
}
2.2 数字的计算
vue中 {{}} 两个大括号中可以直接计算
<template>
<div>
<h3>学习Vue</h3>
<div>
{{ num +n}}
</div>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue"
const num = ref(10)
const n = ref(100)
</script>
Harmony中 变量的也可以直接操作，但是也需要组件支持数字类型
@Entry
@Component
struct MyString {
@State num:number = 10;
@State n:number = 100;
build() {
Column() {
Text(`${this.num+this.n}`).height(this.num)
}
.height('100%')
.width('100%')
}
}
巧妙的使用`` 模版字符串 中${}里面可以放表达式计算
2.3 与表单元素的绑定和字符串操作一样
不清楚的看上一篇文章 v-model和$$的故事，注意数据类型的匹配，不然鸿蒙中会报错
再看第三类布尔值（Boolean）的操作
第三类 布尔值(Boolean)的操作
这玩意 实际上也就是对错的操作，对错针对页面就是显示与否，状态有还是没有
3.1 Boolean值的显示
vue中会把布尔值转成字符串输出
<template>
<div>
<h3>学习Vue</h3>
<div>
{{ flag }}
</div>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue"
let flag = ref(true)
</script>
Harmony中会把布尔值转成字符串输出
鸿蒙没办法直接输出 boolean 值 放在Text中，Text又只支持string
@Entry
@Component
struct MyString {
@State flag:boolean = true
build() {
Column() {
Text(`${this.flag}`)
}
.height('100%')
.width('100%')
}
}
3.2 Boolean判断显示
vue中 用 v-if v-else-if v-else 相关的指令
<template>
<div>
<h3>学习Vue</h3>
<div>
<div v-if="flag">显示</div>
<button @click="change">修改状态</button>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue"
const flag = ref(true);
const change =()=>{
flag.value = !flag.value;
}
</script>
Harmony中用 if表达式 里面没有指令了
@Entry
@Component
struct MyString {
@State flag:boolean = true
build() {
Column() {
if(this.flag){
Text(`显示`)
}
Button("改变").onClick(()=>{
this.flag = !this.flag
})
}
.height('100%')
.width('100%')
}
}
点击就可以切换了
3.3 Boolean 判断显示2
vue中 v-show的控制 常见vue问题 v-if和v-show的区别
<template>
<div>
<h3>学习Vue</h3>
<div>
<div v-show="flag">显示</div>
<button @click="change">修改状态</button>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue"
const flag = ref(true);
const change =()=>{
flag.value = !flag.value;
}
</script>
区别 if不满足没有真实DOM show的都会有
Harmony中用 visibility的属性方法来解决 配合三元（三目）运算符
@Entry
@Component
struct MyString {
@State flag:boolean = true
build() {
Column() {
Text(`显示`).visibility(this.flag? Visibility.Visible:Visibility.Hidden)
Button("改变").onClick(()=>{
this.flag = !this.flag
})
}
.height('100%')
.width('100%')
}
}
但是为占位置哟
显示的效果为
不显示的效果为 中间有空行
总结
本文对比了Vue和Harmony(鸿蒙)在数字和布尔值操作上的差异。数字操作方面，Vue可直接在模板中显示和计算数字，而Harmony需要严格遵循数据类型约束，通过模板字符串${}进行表达式计算。布尔值操作上，Vue使用v-if/v-show指令控制显示，Harmony则通过if表达式和visibility属性实现，其中v-show对应visibility属性，会保留DOM位置。文章还指出鸿蒙组件对数据类型的强约束性，如Text组件只接受字符串。两种框架在数据绑定和显示控制上各有特点，需要开发者注意数据类型匹配和语法差异。
未完待续 欢迎加入 鸿蒙学堂 继续学习
