Hướng dẫn vue render html without v-html - vue kết xuất html mà không có v-html
|
Trong Vue 2 Show
Vì, ở đây tôi không thể hiển thị bất kỳ thẻ HTML nào, tôi mệt mỏi
Kissu 32.2K12 Huy hiệu vàng46 Huy hiệu bạc91 Huy hiệu Đồng12 gold badges46 silver badges91 bronze badges Đã hỏi ngày 31 tháng 5 năm 2021 lúc 7:26May 31, 2021 at 7:26
 2 Thật không may, Vue không cung cấp một cách dễ dàng để thực hiện điều này (chi tiết hơn về lý do có thể được tìm thấy ở đây: https://github.com/vuejs/vue/issues/7431) Như đã giải thích ở đó, bạn có thể tạo một thành phần chức năng để chỉ hiển thị HTML mà không cần phần tử trình bao: Thành phần này được tạo bởi một thành viên Vue Core (Linusborg): https://jsfiddle.net/linusborg/mfqjk5hm/ Đã trả lời ngày 31 tháng 5 năm 2021 lúc 9:27May 31, 2021 at 9:27
Bartosz Salwiczek Ngày 8 tháng 2 4 phút đọc Chỉ thị Ứng dụng dễ bị tổn thương
Một số nền tảng về VuejsVUEJS DOM và Cú pháp nội suy So sánh ví dụ1 và ví dụ2 Cách hiển thị HTML động trong Vuejs bằng chỉ thị V HTML. Vue JS là một khung phía trước nhận được tất cả lực kéo mà nó xứng đáng. Nó được tạo ra bằng cách chọn anh đào các tính năng tốt nhất của Angular và React, hai khung Java Frontend nổi tiếng trong ngành CNTT hiện đại. Đó là một khuôn khổ tuyệt vời và mạnh mẽ mà bạn có thể tin tưởng. Bản thân tôi đã sử dụng nó cho các mục đích khác nhau như ứng dụng di động, phát triển trang web, ứng dụng máy tính để bàn với electron, v.v. VUEJS DOM và Cú pháp nội suySo sánh ví dụ1 và ví dụ2 Cách hiển thị HTML động trong Vuejs bằng chỉ thị V HTML. Example1Vue JS là một khung phía trước nhận được tất cả lực kéo mà nó xứng đáng. Nó được tạo ra bằng cách chọn anh đào các tính năng tốt nhất của Angular và React, hai khung Java Frontend nổi tiếng trong ngành CNTT hiện đại. Đó là một khuôn khổ tuyệt vời và mạnh mẽ mà bạn có thể tin tưởng. Bản thân tôi đã sử dụng nó cho các mục đích khác nhau như ứng dụng di động, phát triển trang web, ứng dụng máy tính để bàn với electron, v.v. Example2So sánh ví dụ1 và ví dụ2Thông báo chúng tôi đã hiển thị trên ví dụ1 và example2 là như nhau. Ngoại trừ vị trí, nó đã được xác định. Trong ví dụ đầu tiên. Thông điệp được viết bên trong ____ 13 & nbsp; Tag & nbsp; Là một HTML bình thường, không phải trong trường hợp Vue the Message was written inside the <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div> Và nó mang lại kết quả như thế này. Trong ví dụ thứ hai, cùng một thông báo HTML đã được sao chép vào Vuejs ________ 14 & nbsp; đối tượng và được gán cho một biến có tên là ____ 15 & nbsp; và sau đó được hiển thị bằng cú pháp nội suy. Tham khảo đoạn mã sau.
Nếu bạn đã nhận thấy kết quả của ví dụ 2 của chúng tôi trong jsfiddle trước. & Nbsp; Bạn có thể thấy kết quả trông như thế này. Có điều gì đó sai với kết quả này. Nếu bạn chưa nhận thấy, hãy để tôi cho bạn biết tin nhắn được hiển thị có chứa một số thẻ HTML Vuejs đang hiển thị các phần tử HTML như một văn bản, trong đó nó nên áp dụng lý tưởng thẻ ____ 18 & nbsp; và tăng cường văn bản & nbsp; & nbsp; ________ 19 Nó đã không xảy ra tại sao? Cách hiển thị HTML động trong Vuejs bằng chỉ thị V HTML.Để hiển thị HTML, chúng ta cần hiểu một cái gì đó rất đơn giản. Trong khi nội suy và kết xuất, VUEJS đang xem xét dữ liệu (hoặc) một biến dưới dạng chuỗi hoặc văn bản. Vuejs sẽ không quan tâm nếu có bất kỳ phần tử HTML nào hay không Nó giống như hiển thị bất cứ điều gì được gán cho biến một cách mù quáng. trong khi điều đó nghe có vẻ ổn trong hầu hết các trường hợp. Có một yêu cầu trong đó chúng ta phải hiển thị một số HTML động được tạo trong thể hiện Vuejs và được đưa vào HTML DOM. Hãy nói rằng chúng tôi chỉ đơn giản muốn mã HTML của chúng tôi được hiển thị sau khi xử lý thay vì hiển thị nó là <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>0 Kịch bản thời gian thực và những gì chúng ta đang mong đợi?Hãy giả sử rằng bạn đang xử lý một số dữ liệu HTML được lưu trữ trong cơ sở dữ liệu dưới dạng văn bản và đọc từ cơ sở dữ liệu và muốn hiển thị nó trong ứng dụng của bạn. Ví dụ tốt nhất là Blog hoặc Trình chỉnh sửa WYSIWYG, nơi bất cứ điều gì chúng tôi gõ sẽ được lưu vào cơ sở dữ liệu dưới dạng các phần tử HTML và nó sẽ được đọc và hiển thị sau khi kết xuất.WYSIWYG editor where whatever we type would be saved into the database as HTML elements and it would be read and displayed after rendering. WordPress là ví dụ tốt nhất của loại lưu trữ dữ liệu và truy xuất dữ liệu này. Trong những trường hợp như vậy. Ở đâu bạn có thể muốn thêm một số HTML động vào chương trình VUEJS của mình và hiển thị HTML dưới dạng HTML thông thường (không phải là văn bản) .Vue JS đã cho chúng tôi một chỉ thị có tên Ví dụ của chúng tôi cũng tương tự và chúng tôi muốn hiển thị phần tử HTML thay vì HTML thô. Tham khảo sơ đồ sau đây những gì chúng tôi đang cố gắng đạt được. Đây là bản sửa lỗi cho ví dụ2 bằng V HTMLThay vì sử dụng cú pháp ria mép kép ________ 12 & nbsp; chúng tôi sẽ sử dụng chỉ thị ____ 5 & nbsp; để hiển thị và hiển thị phần tử HTML đúng lúc này. Tham khảo đoạn mã sau đây chúng tôi đã sửa đổi Ví dụ2 với V-HTML Thay đổi duy nhất chúng tôi đã thực hiện là thay thế ____ 24 & nbsp; với & nbsp; ________ 5 & nbsp; Chỉ thị.
Sự kết luậnHy vọng bạn đã học được phép nội suy bình thường và nội suy V-HTML hoặc V HTML trong bài viết này với ví dụ. & NBSP; Nếu bạn thích bài viết này, hãy chia sẻ điều này với bạn bè của bạn và đánh dấu trang web của chúng tôi. Chúc mừng Sarav Ak Theo dõi chúng tôi Onfacebook Ortwitter cho các video và hướng dẫn thực tế hơn. Đăng ký kênh của chúng tôi Tìm tôi trên LinkedIn Hồ sơ của tôi cho bất kỳ tư vấn nào hoặc để thuê chúng tôi [Email & NBSP; được bảo vệ] nếu bạn thích bài viết này. Thể hiện sự hỗ trợ của bạn! Mua cho tôi một ly cà phê. Đăng ký nội dung độc quyền "chỉ dành cho thuê bao" Tôi có nên sử dụng VKết xuất động HTML tùy ý trên trang web của bạn có thể rất nguy hiểm vì nó có thể dễ dàng dẫn đến các cuộc tấn công XSS.Chỉ sử dụng V-HTML trên nội dung đáng tin cậy và không bao giờ trên nội dung do người dùng cung cấp.Only use v-html on trusted content and never on user-provided content.
Bạn có cần HTML cho Vue không?Hầu hết thời gian, các thành phần Vue được viết bằng cú pháp mẫu HTML đặc biệt.Khi bạn cần kiểm soát nhiều hơn cú pháp HTML cho phép, bạn có thể viết các chức năng JSX hoặc JavaScript đơn giản để xác định các thành phần của bạn.. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your components.
V là gìChỉ thị V-HTML là Chỉ thị Vue.js được sử dụng để cập nhật HTML bên trong của phần tử với dữ liệu của chúng tôi.Đây là những gì tách nó khỏi văn bản V, có nghĩa là trong khi V-văn bản chấp nhận chuỗi và coi nó như một chuỗi, nó sẽ chấp nhận chuỗi và đưa nó vào HTML.a Vue. js directive used to update a element's inner HTML with our data. This is what separates it from v-text which means while v-text accepts string and treats it as a string it will accept string and render it into HTML.
Vue có biên dịch thành HTML không?Tất cả các mẫu VUE là HTML có giá trị về mặt cú pháp có thể được phân tích cú pháp bởi các trình duyệt tuân thủ thông số kỹ thuật và trình phân tích cú pháp HTML.Dưới mui xe, VUE biên dịch các mẫu vào mã JavaScript được tối ưu hóa cao.Vue compiles the templates into highly-optimized JavaScript code. |
