【Vue】基本語法 v-text/v-once/v-html/{{表達式}}

＃v-text/v-once/v-html/{{表達式}}

• <div v-text="text" v-once></div> 可以單次綁定text
• <p v-html="rawHtml"></p> v-html才能渲染html
• <h4 :id="htmlId">HTML 屬性</h4> :id 綁定ID標籤
• <input type="text" :disabled="isDisabled" > : disabled 綁定disabled特性
• {{number1+ number2}} 可以直接運算

 <div id="app">

          <input type="text"  v-model="text">
          <div v-text="text" v-once></div> //可以單次綁定text
          <h4 >原始 HTML</h4>       //{{ rawHtml }}只會有純文字html
          {{ rawHtml }}
          <p v-html="rawHtml"></p>  //v-html才能渲染html
          <h4 :id="htmlId">HTML 屬性</h4>  //:id 綁定ID標籤
          {{number1* number2}}  //可以直接放表達式
          <input type="text" :disabled="isDisabled"  >  //: disabled 綁定disabled特性
        </div>

   var app = new Vue({
            el: '#app',
            data: {
              text: '這是一段文字',
              rawHtml: `<span class="text-danger">紅色文字</span>`,
              number1: 100,
              number2: 300,
              htmlId: 'HTMLID',
              isDisabled: true
            },
          });

​