Vue学习第一天：01插值和指令_vue中有时候插值语句引用不到-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35294985/article/details/109453318

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个Vue程序</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in productList" :key="index">
                    {{item.name}}<br />
                    <span v-if="!item.del">{{item.specification+item.price}}元</span>
                    <span v-else style="text-decoration: line-through;">{{item.specification+item.price}}元</span>
                    <button v-show="item.del">删除</button>
                </li>
            </ul>
        </div>
        <script src="./vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    productList: [{
                            name: "坚果",
                            // 规格
                            specification: "1包500g",
                            price: 99,
                            del: false
                        },
                        {
                            name: "面包",
                            // 规格
                            specification: "1包1000g",
                            price: 10,
                            del: true
                        }
                    ]
                }
            })
        </script>
    </body>
</html>