ホームページ >ウェブフロントエンド >Vue.js >vue.js における v-bind の意味

vue.js における v-bind の意味

coldplay.xixi
coldplay.xixiオリジナル
2020-11-10 09:57:0114610ブラウズ

vue.js の [v-bind] は、複数の属性値をバインドしたり、コンポーネントのような props 値を作成したりするために使用されます。[v-bind] には、略語である対応する構文上のシュガーがあります。これは構文を簡潔にするのに役立ちます。

vue.js における v-bind の意味

#このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事:

vue.js

v-bindの紹介

以前勉強しましたディレクティブの主な機能は、テンプレートのコンテンツに値を挿入することです。

ただし、コンテンツを動的に決定する必要があることに加えて、特定の属性を動的にバインドすることも必要です。

  • たとえば、a 要素の href 属性を動的にバインドします。

  • たとえば、img 要素の src 属性を動的にバインドします

  • #現時点では、v-bind を使用して以下を指定できます。

    #関数: 属性を動的にバインドします
  • 省略形::
  • 期待値: any(引数あり) | オブジェクト (引数なし)
  • パラメータ: attrOrProp(オプション)
v-bind の基本

v-bind は、複数の属性値をバインドしたり、コンポーネントのような props 値を作成したりするために使用されます (これから紹介します)これはコンポーネントについて学ぶときです)

開発では、どのプロパティを動的にバインドする必要がありますか?

たとえば、画像リンク (src)、Web サイト リンク (href)、一部のクラスやスタイルの動的バインディングなど。

たとえば、Vue インスタンスのデータ バインディングを通じて、要素の src と href のコードは次のとおりです。

<div id="app">
    <a v-bind:href="link">Vuejs官网</a>
    <img v-bind:src="logoUrl" alt=""/>
    
    <!-- 当然也可以通过语法糖“:”缩写v-bind -->
    <!-- <img :src="logoUrl" alt=""/> -->
</div>
<script src="/vue.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            logoUrl:"http://vuejs.org/images/logo.png",
            link:"https://vuejs.org"
        }
    })
</script>

v-bind 構文 Sugar

v-bind には、対応する構文 Sugar があります。これは省略形です

開発では、より簡潔であるため、通常、糖衣構文の形式を使用します。

省略形は次のとおりです:

<div id="app">
    <a :href="link">Vuejs官网</a>
    <img :src="logoUrl" alt=""/>
</div>

v-bind バインディング クラス

多くの場合、次のようにクラスを動的に切り替えたいことがあります。

##データが特定の状態にある場合、フォントは赤色で表示されます。
  • データが別の状態にある場合、フォントは黒で表示されます。
  • クラスをバインドするには 2 つの方法があります:

オブジェクト構文
  • 配列構文
  • オブジェクト構文の意味は、クラスの後にオブジェクトが続くというものです。

オブジェクト構文には次のような用途があります:

用法一:直接通过{}绑定一个类
<h2 :class="{active:isActive}">Hello world</h2>
用法二:也可以通过判断,传入多个值
<h2 :class="{active:isActive,line:isLine}">Hello world</2>  
用法三:和普通的类同时存在,并不冲突
注:如果isActive和IsLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{active:isActive,line:isLine}">Hello world</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello world</h2>

デモ: ボタンをクリックしてフォントの色を切り替えます

...
<style>
    .active{
        color:red;
    }    
</style
...
<div id="app">
<h1 v-bind:class="{active:isActive}">{{message}}</h1>
<button v-on:click="buttonClick()">颜色切换</button>
</div>
<script>
const vue = new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;hello world&#39;,
isActive:true
},
methods:{
buttonClick:function(){
this.isActive = !this.isActive;
}
}
})
</script>

配列構文の意味は次のとおりです。 : クラスの後に配列が続きます。

配列構文には次のような用途があります (配列構文は一般にあまり使用されません):

用法一:直接通过[]绑定一个类
<h2 :class="[active]">Hello world</h2>
用法二:也可以传入多个值
<h2 :class="[active,line]">Hello world</2>
用法三:和普通的类同时存在,并不冲突
注:会有title/active/line三个类
<h2 class="title" :class="[active,line]">Hello world</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello world</h2>

デモ:

... 
<style>
.active{
color: red;
}
.line{
font-size: 50px;
}
.common{
color:green;
}
</style>
...
<div id="app">
    <!-- 如果加了单引号用的就是style中的指定class,如果没有单引号用的就是vue对象中的active变量 -->
    <!-- 注:这里,下面三个类将共存-->
<h2 class="common" :class="[&#39;active&#39;,line]">Hello world</h2>
</div>
<script>
const vue = new Vue({
el: &#39;#app&#39;,
data: {
line:&#39;line&#39;
}
})
</script>
v-bind binding style

v-bind:style を使用して一部の CSS インライン スタイルをバインドできます

CSS プロパティ名 (font-size など) を記述する場合

comeCase: fontSize
  • またはダッシュ区切り (ケバブケース、一重引用符を使用することを忘れないでください) 'font-size'
  • を使用できます。

    #クラスをバインドするには 2 つの方法があります:

#オブジェクト構文

  • 配列構文

  • オブジェクト構文の意味はスタイルであり、その後にオブジェクト型が続きます。
<!-- 对象key是CSS属性名称 -->
<!-- 对象value是具体赋的值,值可以来自于data中的属性 -->
:style="{coloc:currentColor,fontsize:fontsize+&#39;px&#39;}"

配列構文の意味はスタイルであり、その後に続くのは配列型です

<!-- 多个值以,分割即可-->
<div v-bind:style="[baseStyles,overridingStyles]"></div>

デモ:

<div id="app">
<!-- 通过对象绑定style行内样式,值如果为字符串,那么将直接显示样式值 -->
<!-- <h1 :style="{color:&#39;red&#39;}">{{message}}</h1> -->
<!-- 通过变量来绑定行内样式表 -->
<!-- <h1 :style="{color:color}">{{message}}</h1> -->
<!-- 通过方法来绑定样式 -->
<!-- <h1 :style="getStyle()">{{message}}</h1> -->
<!-- 通过数组来绑定样式 -->
<h1 :style="[common,bgColor]">{{message}}</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
message: "hello world",
color: &#39;red&#39;,
common:{color:&#39;blue&#39;,fontSize:&#39;10px&#39;},
bgColor:{backgroundColor:&#39;black&#39;}
},
methods: {
getStyle: function() {
return {
color: this.color
};
}
}
})
</script>

関連する無料学習の推奨事項: javascript

(ビデオ)

以上がvue.js における v-bind の意味の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。