Vue水果商店小案例

最新推荐文章于 2023-12-17 16:05:54 发布

书院二层楼

最新推荐文章于 2023-12-17 16:05:54 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： Vue v-model computed

本文链接：https://blog.csdn.net/caoxinjian423/article/details/108894017

版权

本文通过一个Vue.js实现的水果商店小案例，详细介绍了如何使用v-model和computed属性来实现动态数据绑定和计算属性的功能。案例展示了如何创建Vue实例，定义数据，以及在模板中使用v-model和computed进行数据交互。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>水果商店小案例</title>
</head>
<body>
    <div id="test">
        <ul>
            <li v-for="(fruite,index) in fruites">
                {
  {fruite.name}}:{
  {fruite.count}} 
                <button @click="fruite.count++"><span>加仓+</span></button>
                <input type="text" v-model.number="fruite.count">
                <span v-show="fruite.count===0">&nbsp&nbsp&nbsp&nbsp卖完了，看看别的吧</span>
            </l