VUE의 보간(Interpolation) 구문 이해

1921 단어 VUE삽입값
배경 분석
전통적인 html 페이지에서 우리는 변수를 정의할 수 있습니까?물론 안 됩니다. 그러면 변수를 통해 페이지 내용의 데이터 조작을 실현하기를 원한다면 안 됩니다.물론 우리는 서비스 측에서 html 라벨 라이브러리 방식을 정의한 다음에 html을 모델로 삼아 서비스 측에서 해석해도 실현할 수 있지만 이렇게 하려면 반드시 서비스 측을 통해 처리해야 한다. 한 가지 기술을 통해 클라이언트 html 페이지에서 직접 실현할 수 있을까?
VUE의 보간 구문
이런 문법은 html에 변수를 추가하고 변수 방식을 빌려 js 프로그램의 변수 값과 동기화하여 코드 작성을 간소화하기 위한 것이다.기본 구문은 다음과 같습니다.
{변수 또는 js 표현식}
{{}} 내부에서 변수, 산술 계산, 세 항목, 액세스 그룹 요소, 창설 대상, 호출 함수 등을 쓸 수 있습니다. 한 마디로 하면 되돌아오는 합법적인 js 변수와 표현식만 있으면 됩니다.그러나 프로그램 구조 (지분과 순환) 와 반환 값이 없는 js 표현식은 쓸 수 없습니다.
예:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="js/vue.js"></script>
</head>
<body>
 <div id="app">
  <h3> :{{username}}</h3>
  <h3> :{{gender==1?" ":" "}}</h3>
  <h3> :¥{{(price*count).toFixed(2)}}</h3>
  <h3> : {{new Date(orderTime).toLocaleString()}}</h3>
  <h3> {{week[new Date().getDay()]}}</h3>
 </div>
 <script> new Vue({
   el:"#app",
   data:{
    uname:"dingding",
    gender:1,
    price:12.5,
    count:5,
    orderTime:1600228004389,
    week:[" "," "," "," "," "," "," "]
   }
  }) </script>
</body>
</html>
요약(Summary)
이 소절은 VUE의 {{}} 문법을 분석했는데 이런 문법을 통해 변수 방식으로 js 프로그램의 데이터를 조작하거나 동기화하기 위해 편의를 제공하였다.
이 VUE의 삽입값(Interpolation) 문법에 대한 자세한 설명은 여기까지입니다. 더 많은 관련 VUE 삽입값 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!
R중 마르코프 확률장의 교체 조건 모드
<Baekjoon> #14891 Deque_톱니바퀴 c++

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage