<vue 基础知识 2、插值语法> v-once,v-html,v-text,v-pre,v-cloak

代码结构

 

 

 

一、     Mustache

1、效果  

展示如何将数据展示在页面上

2、代码

01-Mustache.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-Mustache</title>
</head>
<body>

<div id="app">
   <h2>Hello {{message}}</h2>
   <h2>{{firstName}} {{lastName}}</h2>
   <h2>{{firstName + lastName}}</h2>
   <h2>{{firstName + '-----'+lastName}}</h2>
  <h2>{{number * 2}}</h2>
</div>

<script src="vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: 'World',
      firstName: '张',
      lastName:  '三',
      number: 10
    }
  })
</script>

</body>
</html>

 

二、     v-once

1、 效果

说明：当值改变时使用了v-once标签的数据并没有随之改变。

 

 

 

2、代码

02-v-once.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-once</title>
</head>
<body>

<div id="app">
  <h2 v-once>{{message}}</h2>
  <h2>{{message}}</h2>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
    	message: '今天天气不错!'
    }
  })
</script>

</body>
</html>

 

三、v-html

1、效果

按照HTML格式进行解析，并且显示对应的内容

1、 代码

03-v-html.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-html</title>
</head>
<body>

<div id="app">
  <div>{{href}}</div>
  <div v-html="href"></div>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
    	href: '<a href="https://www.baidu.com">百度一下</a>'
    }
  })
</script>

</body>
</html>

 

四、v-text

1、效果

v-text作用和Mustache比较类似，通常情况下，v-text接受一个string类型

2、 代码

04-v-text.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-v-text</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-text="message"></h2>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
    	message: '你好'
    }
  })
</script>

</body>
</html>

 

五、v-pre

1、效果

v-pre 数据的编译过程，例如如下我就想显示{{message}}我不希望显示“你好”这两个字

 

 

2、代码

05-v-pre.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-v-pre</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
    	message: '你好'
    }
  })
</script>

</body>
</html>

 

六、v-cloak

1、效果

页面编译需要一点时间，在没编译成功之前，普通的展示会在页面上显示出{{message}}, 增加了v-cloak后没有编译完成的情况下，不会展示。

（1）编译成功前：

（2）编译成功后：

2、代码

06-v-cloak.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06-v-cloak</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

<div id="app">
  <h2>  普通展示： {{message}}</h2>
  <h2 v-cloak>  v-cloak展示：  {{message}}</h2>
</div>

<script src="vue.js"></script>
<script>
  setTimeout(() => {
	  const app = new Vue({
		  el: '#app',
		  data: {
			  message: 'Hello World'
		  }
	  })
  }, 2000)
</script>

</body>
</html>

 

posted @ 2021-11-15 17:25  万笑佛  阅读(98)  评论(0)    收藏  举报