vue模板用法和计算属性_v-html="videohtml"计算属性

作者：小丑西瓜9 | 2024-06-05 08:53:54

踩

v-html="videohtml"计算属性

vue模板用法

模板用法

文本msg

<div id="app">
			<h1>{{msg}}</h1><!-- 可写简单表达式 -->
</div>
1
2
3

<h1 v-once>{{msg}}</h1>
<!-- 一次性插入，不修改 -->
1
2

*当数据发生变化的时候，v-once所在值不发生变化，与该节点上的数据绑定

原始html，v-html

用双括号会将数据解释为文本，使用v-html会识别为html代码

<div>
           <h1>{{htmltext}}</h1>
			<!-- 插入html -->
			<h1 v-html="htmltext"></h1>
</div>
<script type="text/javascript">
			var app= new Vue({
				el:"#app",
				data:{
					msg:"hello vue",
					htmltext:'<span>hello</span>'
				}
</script>
			
1
2
3
4
5
6
7
8
9
10
11
12
13
14

显示为：
在这里插入图片描述

v-bind绑定属性

<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#login{
				background: skyblue;
			}
			#register{
				background: palevioletred;
			}
		</style>
</head>
<body> 
      <div>
          <!-- 绑定动态属性  -->
            <div :id="idname"> <!-- v-bind可省略 -->
				<h1>登陆</h1>
			</div> 
			<div v-bind:id="idname"> <!-- 全写 -->
				<h1>登陆</h1>
			</div> 
		</div>
		<script type="text/javascript">
			var app= new Vue({
				el:"#app",
				data:{
					idname:"login"
				}
			})
		</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

表达式应用

           <!-- 表达式应用 -->
			<div>
				{{firstname+lastname}}
			</div>
			<!-- 三元运算符 -->
			<div id="">
				{{isvip?"欢迎vip用户回来":"普通用户"}}
			</div>
1
2
3
4
5
6
7
8

*每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 不会生效，应使用三元表达式 -->
{{ if (ok) { return message } }}

<!-- 三元表达式 -->
{{if?"ture";"false"}}
1
2
3
4
5
6
7
8

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>
1
2
3

<div>
<h1>{{firstname+lastname}}</h1><!-- 简单表达式 -->
<h1>{{fullname}}</h1><!-- 适用于反复修改-->
<!-- 显示单词的逆序 -->
			<h1>{{word.split("").reverse().join("")}}</h1>
</div>

1
2
3
4
5
6
7

var app= new Vue({
  el:"#app",
  data: {
    message: 'Hello'
  },
  computed: {
    fullname:function(){
						console.log(this)
						/* 会将计算的结果缓存，只要this.firstname和this.lastname变量的内容不改变，就不回重重新计算 */
						return this.firstname+this.lastname
					},
					reverseword:function(){
						return this.word.split("").reverse().join("")
					}
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

*使用模板运算可以便捷的储存每次计算结果，若使用简单表达式就会每次循环一遍，增加了负担，对于复杂运算，更适用于计算属性

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/675776