Hiển thị nội dung thuần: v-text
Thay thế toàn bộ nội dung văn bản của phần tử (tương đương textContent), yêu cầu thẻ phải có closing tag.
Render HTML động: v-html
Chèn trực tiếp markup HTML vào phần tử (tương đương innerHTML). Cần lưu ý rủi ro bảo mật khi sử dụng với dữ liệu người dùng.
Duyệt cấu trúc dữ liệu: v-for
Cú pháp lặp với mảng:
<div v-for="(sanPham, chiSo) in danhSach">{{ chiSo }} - {{ sanPham.ten }}</div>Với object:
<div v-for="(giaTri, khoa, chiSo) in thongTin">{{ khoa }}: {{ giaTri }}</div>Điều kiện hiển thị
v-if/v-else-if/v-else: Thêm/xóa phần tử khỏi DOM dựa trên điều kiện
<button v-if="trangThai === 1">Trạng thái 1</button>
<button v-else-if="trangThai === 2">Trạng thái 2</button>v-show: Ẩn/hiện phần tử qua thuộc tính CSS display
<div v-show="daDangNhap">Nội dung bảo mật</div>Ràng buộc thuộc tính động: v-bind
Cú pháp đầy đủ và viết tắt:
<img v-bind:src="duongDanAnh" :alt="'Ảnh mô tả'">Lưu ý: Giá trị chuỗi tĩnh phải đặt trong dấu nháy đơn.
Ràng buộc hai chiều: v-model
Đồng bộ dữ liệu giữa form input và state:
<input v-model="timKiem" placeholder="Nhập từ khóa">
<p>Bạn đang tìm: {{ timKiem }}</p>Chỉ áp dụng cho các phần tử có thuộc tính value (input, textarea, select).
Xử lý sự kiện: v-on
Cú pháp sự kiện với viết tắt @:
<button @click="tangGiaTri">+1</button>
<button @click="soLuong = 0">Đặt lại</button><!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<style>.hang-chan { background: #eaeaea; }</style>
</head>
<body>
<div id="ung-dung"></div>
<script>
new Vue({
el: '#ung-dung',
template: `
<div>
<h2 v-text="noiDung"></h2>
<div v-html="markup"></div>
<button v-if="giaTri === 1">Lựa chọn A</button>
<button v-else-if="giaTri === 2">Lựa chọn B</button>
<div v-show="hienThi" class="thong-bao">Thông báo quan trọng!</div>
<img :src="anhMinhHoa" :alt="'Demo image'">
<input v-model="quocTich" placeholder="Nhập thử Việt Nam">
<div v-if="quocTich === 'Việt Nam'">Xin chào đất nước!