Vue学习笔记 - 页面数据渲染的方式

Posted 2021-06-18 WHOVENLY

该篇文章主要讲了Vue中渲染数据的前5种方式，其余2种方式请点击Vue学习笔记 - 页面数据渲染的方式（二）进行查看。

目录

• 1.Mustache语法 {{}}
• 2.v-text
• 3.v-html
• 4.v-once
• 5.v-pre

1.Mustache语法 {{}}

1.定义：可以是写在data里的一个属性，也可以是写在methods中的一个方法，作用：将数据添加到view上，并不覆盖。

2.使用{{属性名}}或{{方法名()}}

3.例子

<div>{{message}}</div>
<div>{{message}}可耐！</div>
<div>{{getMessge(message)}}</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "皮卡丘",
  },
  methods: {
    getMessge(value) {
       return value;
    },
  },
});

网页展示效果：

2.v-text

1.定义：用于显示纯文本

2.使用：v-text=“属性名”

3.特点：不像{{}}般灵活，不常用。并且会覆盖该元素原本内容。

<div v-text="message"></div>
<div v-text='message+"无敌可耐！"'>可耐！</div>
<div v-text="getMessge(message)"></div>

var app = new Vue({
  el: "#app",
  data: {
    message: "皮卡丘",
  },
});

网页展示效果：

3.v-html

1.定义：用于显示网页

2.使用：v-html=‘属性名’

3.例子：

<div v-html='element'></div>

var app = new Vue({
  el: "#app",
  data: {
    message: "皮卡丘",
  },
});

网页展示效果：

4.v-once

1.定义：该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

2.使用：v-once

3.例子：

<div>{{message}}</div>
<div v-once>{{message}}</div>
<button @click='changeMessage'>改变message</button>

var app = new Vue({
  el: "#app",
  data: {
    message: "皮卡丘",
  },
  methods: {
    changeMessage(){
      this.message = '皮卡皮卡'
    },
  },
});

页面效果：

当点击改变message按钮后的效果：

5.v-pre

1.定义：用于跳过这个元素和他子元素的编译过程，用于像是原本的Mustache语法

2.使用：v-pre

3.例子：

<div v-pre>
  <div>{{message}}:皮卡皮卡</div>
  <div v-html="element">皮卡丘~</div>
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "皮卡丘",
    element:"<div>皮卡丘卡哇伊！</div><div>皮卡丘卡哇伊！</div><div>皮卡丘卡哇伊！</div>",
  },
});

未加v-pre命令时，应展示的效果：

加入v-pre命令后的效果：

还有v-model和v-for方式请点击Vue学习笔记 - 页面数据渲染的方式（二）进行查看。