vue 템 플 릿 문법-삽입 값 상세 설명

1.텍스트
데이터 바 인 딩 의 가장 흔 한 형식 은 바로'Mustache'문법(쌍 괄호)의 텍스트 삽입 값 을 사용 하 는 것 입 니 다.

<span>message:{{msg}}</span>

v-once 명령 을 사용 하면 일회 성 플러그 인 을 실행 할 수 있 으 며,주어 가 바 뀌 면 플러그 인 내용 이 업데이트 되 지 않 습 니 다.
그러나 이번 에는 이 노드 의 모든 데이터 바 인 딩 에 영향 을 미 치 는 것 을 주의 하 십시오.

<span v-once>this will nver change:{{message}}</span>

2.순수 html
이중 괄호 는 html 가 아 닌 일반 텍스트 로 데 이 터 를 해석 합 니 다.html 출력 을 위해 v-html 명령 을 사용 할 수 있 습 니 다:

<div v-html="rawhtml"></div>

삽 입 된 내용 은 HTML-데이터 바 인 딩 으로 간 주 됩 니 다.v-html 을 사용 할 수 없습니다.
vue 는 문자열 기반 의 모드 엔진 이 아니 기 때문에 복합 부분 모드 입 니 다.구성 요 소 는 1 인 UI 재 활용 과 복합 적 인 기본 유닛 에 더욱 적합 합 니 다.
사이트 에서 동적 으로 렌 더 링 된 임의의 html 는 XSS 공격 을 초래 하기 쉽 기 때문에 매우 위험 할 수 있 습 니 다.
신뢰 할 수 있 는 내용 에 만 html 플러그 인 을 사용 하 십시오.사용자 가 제공 하 는 내용 플러그 인 을 사용 하지 마 십시오.
3.속성
Mustache 는 html 속성 에서 사용 할 수 없고 v-bind 명령 을 사용 해 야 합 니 다.

<div v-bind:id="dynamicId"></div>

이것 은 불 값 의 속성 에 도 유효 합 니 다.조건 이 flase 로 구 할 경우 이 속성 은 제 거 됩 니 다.

<button v-bind:disabled="someDynamicCondition">Button</button>

4.JavaScript 표현 식 사용
지금까지 우리 의 모델 에서 우 리 는 간단 한 속성 키 를 연결 해 왔 다.하지만 사실은
모든 데이터 바 인 딩,Vue.js 는 완전한 자바 script 표현 식 지원 을 제공 합 니 다.

{{nunber+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:is="'list-'+id"></div>

이 표현 식 들 은 vue 인 스 턴 스 의 데이터 역할 영역 에서 사 용 됩 니 다.자바 스 크 립 트 가 해석 되 었 습 니 다.
모든 제한 은 바 인 딩 마다 하나의 표현 식 만 포함 할 수 있 기 때문에 아래 에는 적용 되 지 않 습 니 다.

//          
{{var a = 1}}
//        ，        
{{if(ok){return message}}}

템 플 릿 표현 식 은 모두 샌 드 박스 에 놓 여 있 습 니 다.Math 와 Date 와 같은 전역 변수의 화이트 리스트 에 만 접근 할 수 있 습 니 다.
템 플 릿 표현 식 에서 사용자 정의 전역 변수 에 접근 하려 고 하지 마 십시오.
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 vue 템 플 릿 문법-삽입 값 상세 해 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!