第二類數字（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 = 10build() {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 = truebuild() {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 = truebuild() {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 = truebuild() {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組件只接受字符串。兩種框架在數據綁定和顯示控制上各有特點，需要開發者注意數據類型匹配和語法差異。
未完待續 歡迎加入?鴻蒙學堂?繼續學習
