コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

vue 補間の操作は何ですか?

青灯夜游
リリース： 2022-03-18 13:02:04
転載
2228 人が閲覧しました

Vue 補間操作には次のものが含まれます: 1. Mustache 構文、構文 "{{value}}" を使用します; 2. v-once 命令を使用します; 3. v-html 命令を使用して HTML コードを出力します; 4. v-text コマンドはインターフェイスにデータを表示するために使用されます; 5. v-pre コマンドを使用します; 6. v-cloak コマンドを使用します。

vue 補間の操作は何ですか?

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue の 6 種類の補間演算

1 つ目: Mustache

  • # #Mustache 構文 (つまり、二重中括弧)。

  • 口ひげ: あごひげ/あごひげ。 (Mustache 構文)

データは応答性があります

vue 補間の操作は何ですか?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}},world!</h2>
        <h2>{{counter * 2}}</h2>
        <h2>{{message}} {{counter}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello&#39;,
                counter:200
            },
            methods: {

            }
        })
    </script>
</body>

</html>
ログイン後にコピー

2 つのタイプ: v-once

  • この命令の後に式を続ける必要はありません (たとえば、前の v-for の後に式が続きます)

  • このディレクティブは、要素とコンポーネントが一度だけレンダリングされ、 データが変更されても変更されないことを意味します。

vue 補間の操作は何ですか?#

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello&#39;
            }
        })
    </script>
</body>

</html>
ログイン後にコピー

3 番目のタイプ: v-html

サーバー自体から要求されたデータは HTML コードです。

この命令の後には、文字列の HTML を解析してレンダリングする文字列タイプが続くことがよくあります。

vue 補間の操作は何ですか? 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{link}}</h2>
        <h2 v-html>{{link}}</h2>
        <h2 v-html="link"></h2>
    </div>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            data: {
                link: &#39;<a href="http://www.baidu.com">百度一下</a>&#39;
            }
        })
    </script>
</body>

</html>
ログイン後にコピー

4 番目のタイプ: v-text

    v-text の機能は Mustache に似ています。両方とも使用されます。インターフェイスでのデータの表示
    • v-text 通常、
  • string 型を受け入れます

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message2"></h2>
        <h2 v-text="message2">{{message}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello&#39;,
                message2:&#39;World&#39;
            }
        })
    </script>
</body>

</html>
ログイン後にコピー
vue 補間の操作は何ですか?

5 番目のタイプ: v-prev-pre は、

この要素とそのサブ要素をスキップするために使用されます。コンパイル プロセスは次のとおりです。元の Mustache 構文を表示するために使用されます。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    <script>
        let app=new Vue({
            el:&#39;#app&#39;,
            data:{
                message:&#39;Hello&#39;
            }
        })
    </script>
</body>
</html>
ログイン後にコピー
vue 補間の操作は何ですか?

6 番目のタイプ: v-cloak

おそらく直接的なものである可能性があります未コンパイルの Mustache タグ
  • cloak: cloak

vue 補間の操作は何ですか?

#
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>Hello,{{name}}</h2>
        <h2 v-cloak>Hello,{{name}}</h2>
    </div>
    <script>
        setTimeout(()=>{
            let app=new Vue({
                el:&#39;#app&#39;,
                data:{
                    name:&#39;World&#39;
                }
            })
        },10000)
    </script>
</body>
</html>
ログイン後にコピー

(学習ビデオ共有: vue 補間の操作は何ですか?vuejs チュートリアル

、

ウェブ フロントエンド)

以上がvue 補間の操作は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
vue
ソース：csdn.net
前の記事：jqueryでdivのclass属性を変更する方法 次の記事：jqueryでボタンの値を変更する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
テンプレートのメソッドで定義された変数の使用 Vue (v3 ではなく v2) を使用するのは初めてで、テンプレート内 (メソッド内で定義された) で変数を使用しようとしています。私の簡略化されたコード: <templa...
から 2024-04-06 18:10:25
0
2
513
ログインせずに Firebase を使用して Vue でユーザーを作成する ユーザープロフィールを作成するフォームを作成しました。しかし、ユーザーを作成するたびに問題が発生します。ログインおよびログアウトしたユーザー。この問題の解決にご協力ください。 co...
から 2024-04-06 14:20:12
0
1
514
Vue3 Webコンポーネントのプロダクションビルドの問題を解決する vue2web コンポーネントを vue3 に移行しようとしていますが、運用用のビルドを作成するときに問題が発生します。 --targetwc を指定して vue-cli を使用し...
から 2024-04-06 12:43:37
0
1
473
vue vee-validate は日付ピッカーの選択の問題をキャプチャします datepicker フィールドの v-model バインディングが正しく機能しません。選択を行うと、画面上でライブ更新されますが、値は formValues リアクティブ オブジ...
から 2024-04-06 11:38:56
0
1
510
Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...
から 2024-04-06 11:35:59
0
1
456
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート