Trạng thái và thể hiện trạng thái

Giới thiệu nội dung bài viết

Trạng thái trong Vue.js là gì? Trong Vue.js nói riêng cũng như trong những ứng dụng nói chung thì trạng thái là những biến số những dữ liệu có thể thay đổi một của chương trình. Ở Vue.js trạng thái được quản lý trong component sẽ được định nghĩa ở data hook

1. Thể hiện biến lên tài liệu

Như bài một chúng ta có đề cập đến cú pháp để in giá trị một biến ra trang web của ta Bây giờ chúng ta sẽ tìm hiểu thêm về 2 cú pháp đó là v-text và v-html v-text được hiểu như nó được đính vào attribute của một thẻ và cụ thể hơn nó là một directive (sẽ đề cập rõ hơn ở bài 25) directive sẽ có prefix v v-html là một directive cũng là để hiển thị giá trị của một trạng thái, nhưng với chức năng cụ thể hơn là khi biến truyền vào là một chuỗi có cú pháp HTML thì nó sẽ chuyển đoạn chuỗi này về HTML DOM luôn, chứ không phải là thuần chuỗi như v-text

1
2
3
4
5
6
7
8
9
10
11
12
13
 <div id="app"> 
  
 <div v-text="message"></div> 
 <div v-html="message_style"></div> 
</div> 
<script> 
 var app = new Vue({ 
 el: "#app", 
 data: { 
 message: "Hello Vue!", 
 message_style: "Hi! <strong>Vue.js</strong> Developer",  }, 
 }); 
</script>

2. Cú pháp điều kiện v-if, v-else-if, v-else

Giống như cú pháp câu lệnh điều kiện trong các ngôn ngữ lập trình. Thay vì những block { } thì bây giờ nó được đính vào DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
 <div id="app"> 
 <div v-if="num===1">Số Một</div> 
 <div v-else-if="num===2">Số Hai</div> 
 <div v-else>Chưa định nghĩa</div> 
</div> 
<script> 
 var app = new Vue({ 
 el: "#app", 
 data: { 
 num: 2, 
 }, 
 }); 
</script>

Với đoạn mã như trên ta sẽ nhận được kết quả là: Số Hai cũng rất dễ hình dung phải không Và cũng nhân tiện giới thiệu cho các bạn thẻ khi mình muốn xài điều kiện như trên nhưng không muốn sinh ra thẻ div thì hãy thay thẻ div bằng thẻ template

1
2
3
4
5
6
7
8
9
10
11
12
13
 <div id="app"> 
 <template v-if="num===1">Số Một</template> 
 <template v-else-if="num===2">Số Hai</template> 
 <template v-else>Chưa định nghĩa</template> 
</div> 
<script> 
 var app = new Vue({ 
 el: "#app", 
 data: { 
 num: 2, 
 }, 
 }); 
</script> 

Thẻ này cũng áp dụng bọc một nhóm thẻ chẳng hạn để hiển thị và xử lí theo điều kiện cho nhóm thẻ

3. Cú pháp điều kiện v-show

Directive này nhận giá trị true/false và có chức năng ẩn/hiện thẻ, component bản chất của nó là toggle style CSS display:none cho thẻ được đính vào. v-show không thể sử dụng được cho . Vì hiểu đơn giản là nó không thể set CSS cho 1 thẻ mà không được render

4. Vòng lặp v-for

Giống với vòng lặp for trong các ngôn ngữ lập trình v-for có thể nhận vào một Array, một json Object hoặc một Number

1
2
3
4
5
6
7
8
9
10
<div id="app"> 
 <div v-for="(item, index) in names" :key=" index"></div> </div> 
<script> 
 var app = new Vue({ 
 el: "#app", 
 data: { 
 names: ["Nam", "Duc", "Anh"], 
 },
}); 
</script> 

Ở đây chúng ta thấy có biến index . index là key của array. nếu không muốn lấy index thì ngắn gọn hơn chúng ta có thể viết

1
<div v-for="item in names" :key=" item"></div>  

5. Vòng lặp v-for Object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app"> 
 <div v-for="(item, index) in mydog" :key="index">:  </div> 
</div> 
<script> 
 var app = new Vue({ 
 el: "#app", 
 data: { 
 mydog: { 
 color: "White", 
 gender: "Male", 
 age: 3, 
 }, 
 }, 
 }); 
</script>

Ở đây index sẽ hứng các key của Object

6. Vòng lặp v-for cho số

1
2
<div id="app"> 
<div v-for="item in 5" :key="index"></div> </div>

Ðây là cách khi bạn muốn lặp theo 1 số nhất định, với phần tử đầu tiên bắt đầu từ 1.

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments