VueJS-バインディング

この章では、VueJSで使用可能な v-bind と呼ばれるバインディングディレクティブを使用して、HTML属性の値を操作または割り当てる方法、スタイルを変更する方法、およびクラスを割り当てる方法を学習します。

データバインドにv-bindディレクティブを使用する必要がある理由とタイミングを理解するための例を考えてみましょう。

例

<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>

上記の例では、タイトル変数と3つのアンカーリンクを表示しています。また、データオブジェクトからhrefに値を割り当てました。

これで、ブラウザで出力を確認して調べると、次のスクリーンショットに示すように、最初の2つのアンカーリンクにhrefが正しくないことがわかります。

アンカータグ

最初のclickmeはhrefをhreflinkとして表示し、2番目のclickmeはそれを\ {\ {hreflink}}に表示し、最後のclickmeは必要に応じて正しいURLを表示します。

したがって、HTML属性に値を割り当てるには、次のようにディレクティブv-bindで値をバインドする必要があります。

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

VueJSは、次のようにv-bindの省略形も提供します。

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

ブラウザにinspect要素が表示される場合、アンカータグにはv-bind属性は表示されませんが、プレーンHTMLは表示されます。 DOMを検査すると、VueJSプロパティは表示されません。

HTMLクラスのバインド

HTMLクラスをバインドするには、 v-bind：class を使用する必要があります。例について考えて、クラスをバインドしてみましょう。

例

<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>

v-bind：class =” \ {active：isactive}”で作成されたdivがあります。

ここで、 isactive はtrueまたはfalseに基づく変数です。 divにアクティブなクラスを適用します。データオブジェクトでは、isactive変数をtrueとして割り当てています。背景色が赤の .active スタイルで定義されたクラスがあります。

変数isactiveがtrueの場合、そうでない場合は色が適用されます。以下は、ブラウザでの出力です。

クラスバインディング

上記の表示では、背景色が赤であることがわかります。 class =” active”がdivに適用されます。

次に、変数の値をfalseに変更して、出力を確認します。次のコードに示すように、変数isactiveはfalseに変更されます。

<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>

IDクラスバインディング

上記の表示では、アクティブクラスがdivに適用されていないことがわかります。

v-bind属性を使用して、HTMLタグに複数のクラスを割り当てることもできます。

例

<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>

上記のコードのdivには、通常のクラス、例class =” info”を適用しました。 isActiveおよびhasError変数に基づいて、他のクラスがdivに適用されます。

出力

情報

これは通常のクラスに適用されます。両方の変数は現在偽です。 isActive 変数をtrueにして出力を見てみましょう。

isActive

上記の表示では、DOMで、divに割り当てられた2つのクラス、infoおよびactiveを確認できます。 hasError変数をtrueに、isActiveをfalseにしましょう。

Dom

さて、上の表示で見ると、infoとdisplayErrorクラスがdivに適用されています。これは、条件に基づいて複数のクラスを適用する方法です。

クラスを配列として渡すこともできます。これを理解するために例を挙げましょう。

例

<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>

出力

displayError

上記のように、両方のクラスがdivに適用されます。変数を使用して、変数の値に基づいてクラスを割り当てましょう。

<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>

次のdivタグに示すように、2つの変数 isActive および haserror を使用しており、クラスバインディング中にdivに同じ変数が使用されています。

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

isActiveがtrueの場合、infoclassがそれに割り当てられます。 haserrorについても同様です。trueの場合、errorClassのみが適用されます。

haserror

ここで、haserror変数をtrueに、isActive変数をfalseにしましょう。

isActive変数

コンポーネントのクラスにv-bindを追加します。次の例では、コンポーネントテンプレートとコンポーネントにクラスを追加しました。

例

<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>

以下はブラウザの出力です。両方のクラスを最終divに適用します。

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

最終div

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>

変数はfalseであるため、アクティブクラスは適用されず、次のスクリーンショットに示すように情報クラスが適用されます。

適用されるクラス

インラインスタイルのバインド

オブジェクト構文

例

<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>

出力

インラインスタイルバインディング

上記の例では、divに対してスタイルが適用され、データオブジェクトからデータがフェッチされます。

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

また、すべての値を変数に割り当ててから、その変数をdivに割り当てることでも同じことができます。

例

<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>

色とfontSizeはstyleobjというオブジェクトに割り当てられ、同じものがdivに割り当てられます。

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

出力

カラーインラインスタイルバインディング

フォーム入力バインディング

これまでに作成した例では、入力されたテキスト要素と割り当てられた変数にバインドされた値をバインドするv-modelを見てきました。このセクションで詳しく説明します。

例

<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>

texboxに入力したものはすべて下に表示されます。 v-modelには値nameが割り当てられ、名前は\ {\ {name}}に表示され、テキストボックスに入力されたものがすべて表示されます。

出力

フォーム入力バインディング

いくつかの例とその使用方法を確認してみましょう。

ラジオとセレクト

例

<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>

出力

ラジオボタン

修飾子

例では、トリム、数値、レイジーの3つの修飾子を使用しました。

例

<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>

出力

修飾子

番号修飾子*では、数字のみを入力できます。数字以外の入力は受け付けません。

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

*Lazy modifier* は、完全に入力され、ユーザーがテキストボックスを離れると、テキストボックスに存在するコンテンツを表示します。

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

*Trim modifier* は、先頭と末尾に入力されたスペースを削除します。

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

Vuejs-binding

VueJS-バインディング

例

HTMLクラスのバインド

例

例

出力

例

出力

例

インラインスタイルのバインド

オブジェクト構文

フォーム入力バインディング

例

出力

ラジオとセレクト

修飾子

目次