• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3文本插值及指令

        發布時間:2023-02-20 21:08:03???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.文本插值
        本節課我們來開始學習 Vue3.x 的模板中文本插值的使用方法。
        一.文本插值
        1. 數據綁定最常用的方式就是:“Mustache”語法,即雙花括號進行文本插值;
        <div id="app">
        計算器:{{counter}}
        div>
        PS:這里也可以使用 JSX 語法,而不使用模板的文本插值,有興趣可以參考手冊;
        2. 綁定在模板中的插值{{counter}},模板是可變的,可以理解為變量;
        3. 如果要設置成常量那種不可改變的量,可以使用指令:v-once;
        <div id="app">
        計算器:<span v-once>{{counter}}span>
        div>
        PS:為了測試,可在控制臺或 log 輸出的方式來驗證數據是否能夠被改變;
        // 獲取到對象名
        const vm = Vue.createApp(App).mount('#app')
        vm.counter = 200
        // 賦值操作
        console.log(vm.counter)
        PS:關于 vm 的詳解,在手冊的“應用&組件實例”部分,后面會逐步了解到;
        4. 文本插值解析出來的是普通文本,而非 HTML 代碼,測試代碼如下:
        rawContent : 'Vue3.x'
        是否字體有變:{{rawContent}}
        PS:這里得到的結果是,并未解析 HTML 代碼,如果要解析,需要使用指令:v-html;
        是否字體有變:<span v-html="rawContent">span>
        PS:強烈建議不要在動態渲染 html 內容,除非非常信任,否則容易遭受 XSS 攻擊;
        5. 模板的文本插值是不能在 HTML attribute(屬性),先看下錯誤寫法:
        <span class="{{className}}">Vue3.xspan>
        PSattribute 一般不翻譯,因為歧義較多,理解成屬性或特性或其它都行;
        6. 如果要讓 HTML attribute 支持模板插值,需要使用 v-bind 指令:
        <span v-bind:class="className">Vue3.xspan>
        PS:可通過控制臺的查看器觀察 HTML 的變化;
        7. 在模板語法中,支持 JavaScript 表達式,比如:運算、函數等;
        {{counter+ 1}}
        {{true ? '' : ''}}
        {{'bbbb@163.com'.split('@')}}
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区