当前位置：首页 > news >正文

站在Vue的角度，对比鸿蒙开发中的数据渲染二

news 2025/8/9 7:31:33

第二类数字（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组件只接受字符串。两种框架在数据绑定和显示控制上各有特点，需要开发者注意数据类型匹配和语法差异。

未完待续欢迎加入鸿蒙学堂继续学习

查看全文

http://www.lryc.cn/news/614067.html