第11节: Vue3 动态参数

在UniApp中使用Vue3框架使用动态参数：

<template>  
  <view>  
    <text>{{ dynamicText }}</text>  
    <button @click="changeText">点击改变文本</button>  
  </view>  
</template>  
  
<script>  
export default {  
  setup() {  
    const dynamicText = ref(''); // 创建一个响应式的数据引用，用于存储动态文本  
  
    // 定义一个方法，用于改变动态文本的值  
    const changeText = () => {  
      dynamicText.value = '你已经点击了按钮！';  
    };  
  
    // 将数据和方法返回给模板使用  
    return {  
      dynamicText,  
      changeText,  
    };  
  },  
};  
</script>

在上面的示例中，我们首先创建了一个响应式的数据引用dynamicText，用于存储动态文本。然后，我们定义了一个名为changeText的方法，用于改变dynamicText的值。在模板中，我们使用插值表达式{{ dynamicText }}来显示动态文本，并给按钮元素绑定了一个点击事件@click="changeText"，当点击按钮时调用changeText方法来改变动态文本的值。这样，我们就可以根据实际需求传入不同的参数来更新动态文本的展示了。

订阅专栏，每日更新

第12节：Vue3 修饰符