From e01ef8dc248235137f2a72fc8bb3447b1cf05429 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=85=E6=A2=A6=E7=94=9C?= <2559797458@qq.com>
Date: Thu, 23 Mar 2023 17:20:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A2=85=E6=A2=A6=E7=94=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Vue 03-23/demo1.html"                     | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 "\346\242\205\346\242\246\347\224\234/Vue 03-23/demo1.html"
diff --git "a/\346\242\205\346\242\246\347\224\234/Vue 03-23/demo1.html" "b/\346\242\205\346\242\246\347\224\234/Vue 03-23/demo1.html"
new file mode 100644
index 0000000..b2be6bf
--- /dev/null
+++ "b/\346\242\205\346\242\246\347\224\234/Vue 03-23/demo1.html"	
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+    <!-- 构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据 -->
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>商品列表</title>
+</head>
+
+<!-- 防止页面加载时出现闪烁问题 -->
+<style>
+    [v-cloak]{
+        display: none;
+    }
+
+    .price{
+        font-size: 18px;
+        font-weight: 1000;
+        color:red;
+    }
+
+    .wenzi{
+        font-size: 15px;
+        font-weight: 1000;
+
+    }
+</style>
+
+
+<body>
+    <div id="app" v-cloak>
+        <div v-html="imgs">
+
+        </div>
+         <!-- <div v-html="imgs">
+
+        </div>   -------这个是显示html里面的图片 -->
+        
+
+        <!-- 这是显示文本内容 -->
+        <div class="text">
+            <p class="wenzi">{{wenzi}}</p>
+            <p class="price">{{price}}</p>
+        </div>
+
+    </div>
+
+
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+
+    <script>
+        var app = Vue.createApp({
+            data: function () {
+                return {
+                    price: "$100",
+                    wenzi: "披萨大减价，快来抢购吧！",
+                    imgs: '<img src ="https://img2.baidu.com/it/u=849995377,520435495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" width=200px >'
+                }
+            }
+        })
+        app.mount("#app");
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee

