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>

2.加法

<template>
  <div id="App">
    <input type="number" v-model="n1" placeholder="请输入第一个数字">
    <br>
    <br>
    <input type="number" v-model="n2" placeholder="请输入第二个数字">
    <br>
    <br>
    <button @click="add">计算结果：{{ sum }}</button>
    <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      n1: 0,
      n2: 0,
      sum: 0,
      errorMessage: ''
    };
  },
  methods: {
    add() {
      if (!this.isNumber(this.n1) || !this.isNumber(this.n2)) {
        this.errorMessage = '请输入有效的数字';
        return;
      }
      this.sum = parseFloat(this.n1) + parseFloat(this.n2);
      this.errorMessage = '';
    },
    isNumber(value) {
      return !isNaN(parseFloat(value)) && isFinite(value);
    }
  }
};
</script>

3.利息计算器

<template>
  <div id="App">
    <h2>银行存款计算器</h2>
    <div>
      <label for="principal">本金 (元): </label>
      <input type="number" id="principal" v-model="principal">
    </div>
    <div>
      <label for="interestRate">年利率 (%): </label>
      <input type="number" id="interestRate" v-model="interestRate">
    </div>
    <div>
      <label for="years">年限 (年): </label>
      <input type="number" id="years" v-model="years">
    </div>
    <br>
    <button @click="calculate">计算结果</button>
    <h1 v-if="result !== null">最终结果: {{ result.toFixed(2) }} 元</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      principal: 0,
      interestRate: 0,
      years: 0,
      result: null,
    };
  },
  methods: {
    calculate() {
      try {
        if (this.principal < 0 || this.years < 0 || this.interestRate < 0) {
          throw new Error('请输入非负数值');
        }

        const rate = this.interestRate / 100;
        this.result = this.principal * Math.pow((1 + rate), this.years);
      } catch (error) {
        alert(error.message);
        this.result = null;
      }
    },
  },
};
</script>