VueJS – Template

Ở những ví dụ trước, chúng ta đã đưa dữ liệu dạng text, ở bài này sẽ tiếp tục các đưa dữ liệu dạng html ra trình duyệt.

Nội dung HTML

Nếu chúng ta sử dụng biến htmlcontent với nội dung là html kết quả sẽ hiên thị như bên dưới.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div>{{htmlcontent}}</div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

js/vue_template.js

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

Để hiển thị được nội dung HTML như mong muốn, ta dùng v-html. Khi thêm v-html vào VueJS xuất ra kết quả HTML như chúng ta mong muốn. Cấu trúc lúc này cũng không cần cặp thẻ {{ }} nữa.

<div v-html = "htmlcontent"></div>

Kết quả

Thuộc tính HTML

Tiếp theo, để thêm các thuộc tính vào kết quả HTML, nếu chúng ta truyền trực tiếp bằng {{}} thì kết quả sẽ không mong muốn. Ví dụ:

Tạo file HTML

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img src = "{{imgsrc}}" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

Tạo file js

js/vue_template1.js

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

Kết quả

Rõ ràng, imgsrc đã không được đưa vào kết quả HTML. Lúc này chúng ta cần dùng v-bind. Sửa lại code html như bên dưới.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img v-bind:src = "imgsrc" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

ở đây chúng ta dùng v-bind:src = “imgsrc” để tạo thuộc tính src với giá trị images/img.jpg cho thẻ img.

Kết quả