Vue 태그 속성 및 Vue.js의 조건부 렌더링

이번에는 Vue.js의 vue 태그 속성과 조건부 렌더링을 가져왔습니다. Vue.js의 vue 태그 속성과 조건부 렌더링을 사용할 때 주의할 점은 무엇인가요? 바라보다. v-bind

event

bind일반 쓰기

<a></a>

약어

<a>百度一下,你就上当</a>

코드 예시

<script>
  export default {    data: function () {      return {        link: &#39;https://wwww.baidu.com&#39;,        title: &#39;title : 百度一下,你就知道&#39;
      }
    }
  }</script>

구현 효과:

v-bind 이벤트 바인딩

v-bind의 일반적인 사용법, 바인딩 수업 v-bind로 묶인 클래스 내용은 배열일 수 있습니다.

실제로 이런 연산이 있습니다...다음 연산은 순전히 고전력입니다! !!

<template>
  <div id="myapp">
    <a v-bind:class="classStr">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        classStr: &#39;red-font&#39;
      }
    }
  }</script>

이렇게 작성할 수도 있습니다

<template>
  <div id="myapp">
    //class="link-href" v-bind:class="classStr"连个不存在冲突    <a class="link-href" v-bind:class="classStr">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        classStr: &#39;red-font&#39;
      }
    }
  }</script>

v-bind를 사용하여 인라인 스타일을 통해 스타일을 변경할 수 있습니다.

<template>
  <div id="myapp">
    <a class="link-href" v-bind:class="className">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        className: [&#39;red-font&#39;, &#39;big-font&#39;]
      }
    }
  }</script>

인라인 스타일을 수정합니다

<template>
  <div id="myapp">
    <a class="link-href" :class="[classA, classB]">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        classA: &#39;hello&#39;,        classB: &#39;word&#39;
      }
    }
  }</script>

v-if 및 v-else도 위의 내용을 구현할 수 있습니다.

위 내용은 Vue 태그 속성 및 Vue.js의 조건부 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!