Home > Web Front-end > JS Tutorial > Detailed introduction to interpolation in vue

Detailed introduction to interpolation in vue

亚连
Release: 2018-06-11 14:44:29
Original
2019 people have browsed it

This article mainly introduces the detailed explanation of vue interpolation v-once, v-text, v-html. Now I share it with you and give it as a reference.

Introduce Vue.js, through script form, vue official website syntax record

Create vue application, data and DOM have been associated, everything is responsive

1: Interpolation

Disadvantages: If your network speed is slow, or when data loading fails, interpolation will be rendered directly in the browser [js is disabled, and javascript errors will also cause this problem 】

html:

1

2

3

<section id="content">

<p id="Mustache">没有v-once, {{msg}}</p>

</section>

Copy after login

js:

1

2

3

4

5

6

var vm = new Vue({

    el:"#content",

    data: {

      msg: "hello my lord"

    }

  });

Copy after login

result:

##2:v-once :By using the v-once command, perform one-time interpolation [When the data changes, the content at the interpolation will not continue to be updated]

html:

1

2

3

4

5

6

<section id="content">

  插值:

  <p id="Mustache">{{msg}}</p>

  <p>v-once:当数据改变时,插值处的内容不会更新</p>

  <span v-once>{{msg}}</span>

</section>

Copy after login

js:

1

2

3

4

5

6

var vm = new Vue({

    el:"#content",

    data: {

      msg: "hello once"

    }

  });

Copy after login

result:

3, v-text and v-html

html:

1

2

3

4

5

6

<section id="content">

  v-text:

  <span v-text="tipHtml"></span><br>

  原始 HTML:v-html指令

  <span v-html="tipHtml"></span>

</section>

Copy after login

js:

1

2

3

4

5

6

var vm = new Vue({

    el:"#content",

    data: {

      tipHtml: "<b>小心点,明天</b>"

    }

  });

Copy after login
Result:

Summary: v-text: will also parse html tags into text, and v-html can parse html Label.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Instructions for using the button component in the WeChat mini program

How to use the progress component in the WeChat mini program

About how to get json data from the server in the $.ajax() method

How to load external web pages or server data using the MUI framework

Detailed explanation of Karma Mocha in Vue unit testing

How to use Nprogress.js progress bar in vue

The above is the detailed content of Detailed introduction to interpolation in vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template