VueJS - Ràng buộc

Trong chương này sẽ học cách thao tác hoặc gán giá trị cho các thuộc tính HTML, thay đổi kiểu và gán các lớp với sự trợ giúp của lệnh ràng buộc được gọi là v-bind có sẵn với VueJS.

Hãy xem xét một ví dụ để hiểu tại sao chúng ta cần và khi nào sử dụng chỉ thị v-bind để liên kết dữ liệu.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         {{title}}<br/>
         <a href = "hreflink" target = "_blank"> Click Me </a> <br/>
         <a href = "{{hreflink}}" target = "_blank">Click Me </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">Click Me </a>   <br/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "DATA BINDING",
               hreflink : "http://www.google.com"
            }
         });
      </script>
   </body>
</html>

Trong ví dụ trên, chúng tôi đã hiển thị một biến tiêu đề và ba liên kết neo. Chúng tôi cũng đã gán một giá trị cho href từ đối tượng dữ liệu.

Bây giờ, nếu chúng ta kiểm tra đầu ra trong trình duyệt và kiểm tra, chúng ta sẽ thấy hai liên kết neo đầu tiên không có đúng href như được hiển thị trong ảnh chụp màn hình sau.

Nhấp chuột đầu tiên hiển thị href dưới dạng hreflink và nhấp chuột thứ hai hiển thị nó trong {{hreflink}}, trong khi nhấp chuột cuối cùng hiển thị url chính xác như chúng tôi yêu cầu.

Do đó, để gán giá trị cho các thuộc tính HTML, chúng ta cần phải ràng buộc nó bằng chỉ thị v-bind như sau.

<a v-bind:href = "hreflink" target = "_blank">Click Me </a>

VueJS cũng cung cấp một cách viết tắt cho v-bind như sau.

<a :href = "hreflink" target = "_blank">Click Me </a>

Nếu chúng tôi thấy phần tử kiểm tra trong trình duyệt, thẻ liên kết không hiển thị thuộc tính v-bind, tuy nhiên, nó hiển thị HTML thuần túy. Không có thuộc tính VueJS nào được nhìn thấy khi chúng ta đưa DOM vào.

Các lớp HTML ràng buộc

Để ràng buộc lớp HTML, chúng ta cần sử dụng v-bind: class. Hãy xem xét một ví dụ và ràng buộc các lớp trong đó.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : true
            }
         });
      </script>
   </body>
</html>

Có một div được tạo bằng v-bind: class = ”{active: isactive}”.

Đây, isactivelà một biến dựa trên true hoặc false. Nó sẽ áp dụng lớp đang hoạt động cho div. Trong đối tượng dữ liệu, chúng tôi đã gán biến isactive là true. Có một lớp được định nghĩa trong kiểu.active với màu nền là màu đỏ.

Nếu biến isactive là true, màu sẽ được áp dụng, ngược lại thì không. Sau đây sẽ là kết quả trong trình duyệt.

Trong màn hình trên, chúng ta có thể thấy màu nền là màu đỏ. Lớp = ”hoạt động” được áp dụng cho div.

Bây giờ, hãy thay đổi giá trị của biến thành false và xem kết quả. Biến isactive được thay đổi thành false như trong đoạn mã sau.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : false
            }
         });
      </script>
   </body>
</html>

Trong hiển thị trên, chúng ta có thể thấy lớp đang hoạt động không được áp dụng cho div.

Chúng tôi cũng có thể gán nhiều lớp cho các thẻ HTML bằng thuộc tính v-bind.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">
            {{title}}
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               isActive : false,
               hasError : false
            }
         });
      </script>
   </body>
</html>

Đối với div trong đoạn mã trên, chúng tôi đã áp dụng một lớp bình thường, ví dụ class = ”info”. Dựa trên biến isActive và hasError, các lớp khác sẽ được áp dụng cho div.

Đầu ra

Đây là một lớp học bình thường được áp dụng. Cả hai biến đều sai ngay bây giờ. Cùng làm nàoisActive biến thành true và xem kết quả đầu ra.

Trong hiển thị trên, trong DOM, chúng ta có thể thấy hai lớp được gán cho div, info và active. Hãy đặt biến hasError là true và isActive là false.

Bây giờ, khi chúng ta thấy trong màn hình trên, lớp thông tin và displayError được áp dụng cho div. Đây là cách chúng ta có thể áp dụng nhiều lớp dựa trên các điều kiện.

Chúng ta cũng có thể truyền lớp dưới dạng một mảng. Hãy để chúng tôi lấy một ví dụ để hiểu điều này.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError'
            }
         });
      </script>
   </body>
</html>

Đầu ra

Như chúng ta thấy ở trên, cả hai lớp đều được áp dụng cho div. Hãy sử dụng một biến và dựa trên giá trị của biến, gán lớp.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : true,
               haserror : false
            }
         });
      </script>
   </body>
</html>

Chúng tôi đã sử dụng hai biến isActive và haserror và điều tương tự được sử dụng cho liên kết lớp div while như được hiển thị trong thẻ div sau.

<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>

Nếu isActive là true, thì tân cổ điển sẽ được chỉ định cho nó. Tương tự với haserror, nếu nó là true thì chỉ errorClass sẽ được áp dụng cho nó.

Bây giờ, chúng ta hãy tạo biến haserror là true và biến isActive là false.

Bây giờ chúng ta sẽ thêm v-bind cho các lớp trong các thành phần. Trong ví dụ sau, chúng tôi đã thêm một lớp vào khuôn mẫu thành phần và cả thành phần.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component class = "active"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

Sau đây là kết quả trong trình duyệt. Nó áp dụng cả hai lớp cho div cuối cùng.

<div class = ”info active”></div>

Thêm một biến trong phần thành phần để hiển thị, dựa trên true / false.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component v-bind:class = "{active:isActive}"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

Vì biến là false, nên lớp đang hoạt động không được áp dụng và lớp thông tin được áp dụng như thể hiện trong ảnh chụp màn hình sau.

Ràng buộc các kiểu nội tuyến

Cú pháp đối tượng

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               activeColor: 'red',
               fontSize :'30'
            }
         });
      </script>
   </body>
</html>

Output

Trong ví dụ trên, đối với div, kiểu được áp dụng và dữ liệu được tìm nạp từ đối tượng dữ liệu.

<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
   title : "Inline style Binding",
   activeColor: 'red',
   fontSize :'30'
}

Chúng ta cũng có thể làm điều tương tự bằng cách gán tất cả các giá trị cho một biến và sau đó gán biến đó cho div.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               styleobj : {
                  color: 'red',
                  fontSize :'40px'
               }
            }
         });
      </script>
   </body>
</html>

Màu và fontSize được gán cho đối tượng được gọi là styleobj và nó cũng được gán cho div.

<div v-bind:style = "styleobj">{{title}}</div>

Output

Ràng buộc đầu vào của biểu mẫu

Cho đến nay trong ví dụ chúng ta đã tạo, chúng ta đã thấy v-model ràng buộc phần tử văn bản đầu vào và giá trị được liên kết với một biến được gán. Chúng ta hãy tìm hiểu thêm về nó trong phần này.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>TEXTBOX</h3>
         <input  v-model = "name" placeholder = "Enter Name" />
         <h3>Name entered is : {{name}}</h3>
         <hr/>
         <h3>Textarea</h3>
         <textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
         <h1><p>{{textmessage}}</p></h1>
         <hr/>
         <h3>Checkbox</h3>
         <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               textmessage:'',
               checked : false
            }
         });
      </script>
   </body>
</html>

Bất cứ điều gì chúng ta nhập vào hộp thư được hiển thị bên dưới. v-model được gán tên giá trị và tên được hiển thị trong {{name}}, hiển thị bất cứ thứ gì được nhập vào hộp văn bản.

Đầu ra

Hãy xem thêm một số ví dụ và cách sử dụng nó.

Đài và Chọn

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>Radio</h3>
         <input type = "radio" id = "black" value = "Black" v-model = "picked">Black
         <input type = "radio" id = "white" value = "White" v-model = "picked">White
         <h3>Radio element clicked : {{picked}} </h3>
         <hr/>
         <h3>Select</h3>
         <select v-model = "languages">
            <option disabled value = "">Please select one</option>
            <option>Java</option>
            <option>Javascript</option>
            <option>Php</option>
            <option>C</option>
            <option>C++</option>
         </select>
         <h3>Languages Selected is : {{ languages }}</h3>
         <hr/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               picked : 'White',
               languages : "Java"
            }
         });
      </script>
   </body>
</html>

Output

Bổ ngữ

Chúng tôi đã sử dụng ba công cụ sửa đổi trong ví dụ - trim, number và lazy.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
         <br/>
         <span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
         <h3>Display Message : {{msg}}</h3>
         <br/>
         <span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
         <h3>Display Message : {{message}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               age : 0,
               msg: '',
               message : ''
            }
         });
      </script>
   </body>
</html>

Output

Number modifiercho phép chỉ nhập số. Nó sẽ không lấy bất kỳ đầu vào nào khác ngoài số.

<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">

Lazy modifier sẽ hiển thị nội dung có trong hộp văn bản sau khi nó được nhập đầy đủ và người dùng rời khỏi hộp văn bản.

<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">

Trim modifier sẽ xóa bất kỳ khoảng trắng nào được nhập ở đầu và cuối.

<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved