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

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

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学习笔记 - 页面数据渲染的方式(二)进行查看。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值