1.数据绑定

绑定元素

<template>
    <p>数值型：{{ a }}</p>
    <p>布尔型：{{ b }}</p>
    <p>字符型：{{ c }}</p>
    <button @click="update">点击更新</button>
</template>

<script>
import { ref } from 'vue'
export default {
    setup() {
        const a = ref(123);
        const b = ref(true);
        const c = ref('我叫刘子龙');
        const update =function(){
            a.value = 2222222;
            b.value = false;
            c.value = '我叫刘子龙龙龙';
        }
        return {
            a,
            b,
            c,
            update
        }
    }

  
}
</script>

<template>
  <P>姓名：{{ name }}</P>
  <P>年龄：{{ age }}</P>
  <P>性别：{{ gender }}</P>
  <p>爱好：{{ hobby }}</p>
    <button @click="update">点击更新</button>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
   setup() {
    const person = reactive({
      name: '张三',
      age: 25,
      gender: '男',
      hobby:["篮球","足球","乒乓球"]
    }
      
    )
    let update =function(){
      person.name="李子龙"
      
      person.hobby[0]="PC"
      person.hobby[1]="打游戏"
      person.hobby[2]="打人"

    }
    return {
      ...toRefs(person),
      update
    }
   
  }   
  
}
</script>

绑定

<template>
  <h1>宏碁（acer）掠夺者·擎 NEO 16英寸游戏本</h1>
  <img src="imgs[0]" alt="">
  <P>
    <span class="like">{{ count }}</span>\
    <img src="imgs[1]" alt=""  v-on:click="Getmelike">

  </P>
</template>

<script>
import { reactive, toRefs } from 'vue'
import img1 from ".assets/1.jpg"
import img2 from ".assets/2.jpg"
export default {
   setup() {
    const data = reactive({
      count: 888,
      imgs: [img1, img2]

      })
      let Getmelike = function() {
       
        data.count += 1;
      }
      return {
        ...toRefs(data),
         Getmelike
      }
    }


  
}
</script>

<style>
.like {
  font-size: 24px;
  font-weight: bold;
  line-height: 56px;
  padding-right: 20px;
}
img{
  
}
</style>