成绩

视图预览

完整代码

<template>
  <h1>v-if 指令</h1>

  <p v-if="flag">v-if 指令渲染的内容</p>
  
  <h1>分数：{{ fenshu }}</h1>

  <img :src="imgs[0]" alt="tu1" v-if="fenshu>=60 ">
  <img :src="imgs[1]" alt="tu2"  v-if="fenshu<60 ">
  <br>

  <button @click="add">+10</button>
  <button @click="sub">-10</button>

  

  



</template>

<script>
import { reactive, toRefs } from 'vue'
import img1 from './assets/1.png'
import img2 from './assets/2.png'



export default {  
  name: 'App',
  setup() {
    const data = reactive({
      fenshu: 100,
      imgs:[img1,img2]
    }
    )
  let add =function(){
    data.fenshu+=10;
    if(data.fenshu>=100){
      data.fenshu=100;
    }
  }
  let sub =function(){
    data.fenshu-=10;
    if(data.fenshu<=0){
      data.fenshu=0;
    }
  }
   return {
    ...toRefs(data),
    add,
    sub
  }

  
  }
}



</script>

素材

评分星星

视图预览

完整代码

<template>
  <h1>v-if 指令</h1>

  <p v-if="flag">v-if 指令渲染的内容</p>
  
  <h1>星星：{{星星}}</h1>

  <img :src="imgs[0]" alt="tu1" v-if="星星==1 ">
  <img :src="imgs[1]" alt="tu2"  v-else-if="星星==2 ">
  <img :src="imgs[2]" alt="tu3"  v-else-if="星星==3 ">
  <img :src="imgs[3]" alt="tu4"  v-else-if="星星==4 ">
  <img :src="imgs[4]" alt="tu5"  v-else="星星==5 ">
  <br>

  <button @click="add">+1</button>
  <button @click="sub">-1</button>

  

  



</template>

<script>
import { reactive, toRefs } from 'vue'


import img1 from './assets/1.jpg'
import img2 from './assets/2.jpg' 
import img3 from './assets/3.jpg' 
import img4 from './assets/4.jpg' 
import img5 from './assets/5.jpg' 



export default {  
  name: 'App',
  setup() {
    const data = reactive({
      星星: 1,
      imgs:[img1,img2,img3,img4,img5]
    }
    )
  let add =function(){
    data.星星+=1;
    if(data.星星>5){
      data.星星=5;
    }
  }
  let sub =function(){
    data.星星-=1;
    if(data.星星<1){
      data.星星=1;
    }
  }
   return {
    ...toRefs(data),
    add,
    sub
  }

  
  }
}



</script>

素材