Vuejs에서 HTML 속성을 바인딩하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

Vuejs에서 HTML 속성을 바인딩하는 방법은 무엇입니까?

藏色散人

풀어 주다： 2019-04-04 10:28:06

원래의

3321명이 탐색했습니다.

이 글에서는 vuejs에서 HTML 속성을 바인딩하는 방법을 알아봅니다.

이것이 우리의 시작 코드입니다.

<template>
  <div>
    <h1>Binding atrributes in {{title}}</h1>
    <img src="" />
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "Vuejs",
      image: "logo.png"
    };
  }
};
</script>

로그인 후 복사

위 코드에서 이미지를 표시하려면 src 속성의 데이터를 바인딩해야 합니다. src属性的数据来显示图像。

在data里面我们有image:"logo.png"属性，现在我们需要将src属性链接到image属性，以便我们可以显示图像。

问题是花括号{{}}语法无法绑定html属性中的数据。

<img src="{{image}}" /> //wrong: doesn&#39;t display any image

로그인 후 복사

为了绑定HTML属性中的数据，Vuejs为我们提供了一个指令v-bind:atrributename。

<img v-bind:src="image" /> // 用户现在可以看到图像

로그인 후 복사

这里v-bind指令将元素的src属性绑定到表达式image的值。

如果我们使用v-bind指令，我们可以评估引号内的JavaScript表达式v-bind:src="js expression"。

v-bind:attributename还可以编写简写语法:attributename

data에는 image:"logo.png" 속성이 있습니다. 이제 src 속성을

image<에 연결해야 합니다. /code>속성을 사용하여 이미지를 표시할 수 있습니다. <p></p>문제는 중괄호 <code>{{}}

구문이 html 속성의 데이터를 바인딩할 수 없다는 것입니다.

<!-- fullhand syntax -->
<img v-bind:src="image" />

<!-- shorthand syntax -->
<img :src="image"/>

로그인 후 복사

HTML 속성에 데이터를 바인딩하기 위해 Vuejs는 v-bind:atrributename 지시어를 제공합니다.

<button :disabled="isActive">Click</button>

<a :href="url">My link</a>

<div :class="myClassname"></div>

로그인 후 복사

여기서 v-bind 지시어는 요소의 src 속성을 image 표현식의 값에 바인딩합니다. 🎜🎜 v-bind 지시문을 사용하면 v-bind:src="js 표현식" 따옴표로 묶인 JavaScript 표현식을 평가할 수 있습니다. 🎜🎜v-bind:attributename은 축약된 구문(attributename)을 작성할 수도 있습니다. 🎜rrreee🎜마찬가지로 이 구문을 다른 HTML 속성과 함께 사용할 수 있습니다. 🎜rrreee🎜이 글은 Vuejs에서 HTML 속성을 바인딩하는 방법에 관한 것입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다! 🎜🎜 🎜

위 내용은 Vuejs에서 HTML 속성을 바인딩하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!