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

​

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

 

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

​