uni-app基础语法

最新推荐文章于 2024-10-11 20:32:02 发布

li_yan_

最新推荐文章于 2024-10-11 20:32:02 发布

阅读量1.6k

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/li_yan_/article/details/104778818

版权

本文详细介绍了uni-app的基础语法，包括计算属性、监听属性、列表渲染v-for、条件渲染（v-if/v-else/v-else-if）、变量绑定、数组数据绑定、事件与事件绑定以及事件监听。讲解了各个语法点的使用场景和注意事项，如v-if与hidden的区别，事件监听中的陷阱，以及如何在实际应用中传递参数。

摘要由CSDN通过智能技术生成

计算属性

格式：

computed:{ 
    属性名:function(){ 
        return 返回值; 
    }
 }

<template>
    <view class="demo">
         <view>{
  {message}}</view>
         <view>{
  {reversedMessage}}</view> 
    </view> 
</template>

在computed中写上计算属性

<script>
export default {
    data() {
        return {
            message: 'uniapp'
        }
    },
    computed:{
    //计算属性的 getter
        reversedMessage: function() {
            return this.message.split('').reverse().join('')   //字符串反转
        }
    }
}

监听属性

通过$watch来响应数据的变化

<view>
   <text>{
  {mag}}</text>
</view>
<button type="primary" @tap="add">add</button>
data:{
      mag：0
},
methods: {
    add(){
       this.mag=this.mag+1;
    }
},
watch:{
   mag:function(new,old){
       console.log("watch",this.mag)
    }
}

列表渲染 v-for

循环渲染

<view>
    <view v-for="(item,index) in students">
        {
  {index}}-{
  {item.name}}:{
  {item.age}}
    </view>
</view>
data(){
     return{
         students:[
            {name:"zhangsan",age:18},
            {name:"lisi",age:20}
         ]
     }
 }

vue必须要有根节点，在外面再嵌套一层view
(item,index) in students
括号表示要用哪些字段，中间用逗号隔开，in表示要循环哪个数组