vue模板用法和计算属性

最新推荐文章于 2023-11-13 23:26:14 发布

是千千千熠啊

最新推荐文章于 2023-11-13 23:26:14 发布

阅读量681

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46092900/article/details/108889596

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

vue模板用法

模板用法

文本msg

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

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

*当数据发生变化的时候，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>

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

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>

表达式应用

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

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

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

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

<!-- 三元表达式 -->
{{if?"ture";"false"}}

计算属性

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

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

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

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("")
					}
  }
})

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

是千千千熠啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue模板用法和计算属性

vue模板用法模板用法文本msg原始html，v-htmlv-bind绑定属性表达式应用计算属性模板用法文本msg<div id="app"> <h1>{{msg}}</h1></div><h1 v-once>{{msg}}</h1>*当数据发生变化的时候，v-once所在值不发生变化，与该节点上的数据绑定原始html，
复制链接

扫一扫