vue插值表达式的使用

最新推荐文章于 2024-02-01 17:54:39 发布
最新推荐文章于 2024-02-01 17:54:39 发布
阅读量3.1k 收藏 8
点赞数 3
分类专栏： Vue 文章标签： vue html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42293605/article/details/102756975
版权

vue的基本创建

1.首先要引入vue的类库。
2.定义一个vuejs管理的区域，在vue管理的区域内可以是使用vuejs特性，可以使用插值表达式，把vuejs管理的数据放渲染在页面上。
3.实例化vue对象：

  • 实例化的对象必须存在两个属性
    ①：el 选择器，表示vuejs管理的区域
    ②：data（对象） 表示的是vuejs可以操作的数据

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div><!-- 定义vuejs管理的区域 -->
	</body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script type="text/javascript">
	    //实例化vue
		var vm=new Vue({
			el:'#box',//vuejs管理的区域
			data:{
				//vuejs可操作的数剧
			}
		})
	</script>
</html>

插值表达式

完成vue的实例化后，就可以在定义好的vue操作区域内使用插值表达式了。

  • 首先我们要明白插值表达式是什么？
  1. 插值表达式是vue框架提供的指令
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			{{ demo }}<!-- 调用该模块 -->
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#box',
			data:{
				demo:'hi vuejs'//定义一个模型变量
			}
		})
	</script>
</html>

插值表达式中除了可以写模型变量还可写其他东西：

1.字面量
<body>
		<div id="box">
			{{ 'abc' }}<!-- 字符串、数字等等 -->
			{{ 123 }}
		</div>
</body>
2.四则运算
<body>
	<div id="box">
			<!-- 插值表达式中可以提供一个简单js语境 -->
			{{ 1+2 }} <!-- 3 -->
			{{ 'hello' + 'word!' }} <!-- helloword -->
			{{ 10*2 }} <!-- 20 -->
	</div>
</body>
3.逻辑运算
 <body>
	<div id="box">
			{{  true&&false  }} <!-- false-->
			{{  true || false '  }} <!-- ture -->
			{{  !true  }} <!-- false -->
	</div>
</body>
4.三目运算
<body>
	<div id="box">
			<p>{{ 20 > 18 ? '成年' : '未成年' }}</p> <!-- 成年 --> 
	</div>
</body>
5.全局函数
<body>
	<div id="box">
			<p>{{ Math.random() }}</p>
            <p>{{ parseInt(12.23) }}</p>
	</div>
</body>
爱写bug的咸鱼
关注
专栏目录
Vue文本插值
weixin_46230055的博客
06-29 382
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.min.js"></scrip
Vue插值表达式和事件
qac的博客
01-25 583
文章目录01.Vue声明式渲染02.MVVM03.Vue使用相关问题04.插值表达式05.事件06.操作标签内容 01.Vue声明式渲染 <body> <div id="#app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"Hello!Vue" }
vue的指令-vue的学习之旅
weixin_43131450的博客
05-15 743
什么是指令？ 指令 (Directives) 是带有 v- 前缀的特殊特性。 指令特性的预期值是：单个 JavaScript 表达式。 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 例如 v-on，代表绑定事件。 1.插值表达式 1.1花括号 格式：{{表达式}} 说明： 该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值） 表达式必须有返回结果。例如 1 +1，没有结果的表达式不允许使用，如：let a = 1 + 1; 可以直接获取 Vue 实例中定
12Vue - 模板语法（插值-使用JavaScript表达式）
阿甘兄
07-26 747
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"&gt...
3.Vue插值表达式
西瓜咬人啦
10-20 4534
1.插值表达式 插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。 插值表达式就是{{ }}，括号里面可以执行简单的js代码 。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。 2.插值表达式插值表达式支持简单的语法 操作 解释 常规变量 number，string，boolean等 四则运 +，-，*，/,% 逻辑运算 或与非 三目运算 全局函数 {{ Math.random() }} 对象 {{ {
【vue】vue中的插值表达式&属性绑定
不积跬步无以至千里，不积小流无以成江海~
08-06 1229
2、插值表达式2 父组件中传入msg="",在子组件中使用{{ msg}}插值，在的export default中使用props:{msg:String}1、插值表达式1 子组件中使用{{ msg}}插值，在的export default中使用data(){return{msg:""}}传值；1、在父组件中直接调用子组件的标签，是可以渲染出子组件的内容；2、如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容，那么父组件中的会覆盖子组件插槽中的内容；
简单了解vue 插值表达式Mustache
10-15
Vue插值表达式Mustache的使用相当灵活，它允许开发者将数据对象中的属性动态地绑定到视图上。这意味着当数据对象的属性值发生变化时，视图上相应的内容也会自动更新，从而实现数据的双向绑定。 在Vue中使用插值...
vue 插值表达式 与 指令
d_rui的博客
05-03 1799
一 、插值表达式 作用: 数据渲染语法 { { } }注: 中间可以写 算术运算 三元运算 拼接 不能写 分支 循环 声明变量 且 不能是data之外的自定义变量 二、vue指令 1. v-bind 用来 动态绑定标签上的属性值 语法: <元素 v-bind : 属性名1 = "值1" v-bind : 属性名2 = "值2"></元素> 简写 <元素 :属性名1 = "值1" :属性名2 = "值2">...
1.Vue插值表达式的学习
gin_xin的博客
08-06 681
插值表达式学习：在vm的data中声明一个学生对象： 学生对象的属性为：姓名、身份证号、Java成绩、Python成绩： 在页面显示：学生姓名、身份证号的位数、显示Java和python的成绩、显示2门课的平均成绩。...
vue插值表达式和数据绑定
缚己
01-24 1375
插值表达式 Vue 中的插值表达式类似模板引擎中的写法，通过 {{ value }} 的形式在打括号内填充数据。如下代码所示： <body> <!-- 插值表达式，类似模板引擎中的待填充数据 --> <div class="container">{{msg}}</div> <script src="../lib/vue.js"></script> <script> let v
vue中插值表达式和14个vue指令详解
漫漫前端路，进一寸有进一寸的欢喜
03-29 9469
在学习vue时，插值表达式和vue指令可谓是基础中的基础，这篇文章，就让你彻底了解怎么使用插值表达式和vue中所有指令的用法。 一、插值表达式：{{ }} 可以将vue中的数据填写在插值表达式中 <div id="app">{{ title }}</div> <script> const vm = new Vue({ el:"#app"...
Vue的插值表达式
热门推荐
ZZY1078689276的专栏
10-25 1万+
#Vue的插值表达式{{}}   主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：&amp;lt;span&amp;gt;Message:{{msg}}&amp;lt;/span&amp;gt;Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。 {{}}对JavaScri...
VUE基础插值表达式
weixin_34072458的博客
04-09 290
vue 基本操作插值表达式 首先使用js导入vue.js文件 1 <style> 2 [v-claok]{ 3 display:none;//解决闪烁问题 4 } 5 </style> 6 7 <div id="app" v-cloa...
Vue插值表达式及常用指令
最新发布
qq_44741577的博客
02-01 2055
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用。
vue中的插值表达式
wuliangfan的博客
07-18 6413
前言：在html页面上只能展示字符串，console.log()打印出的也是字符串，意味着都会调用toString()方法，但实际上控制台展示的既有数组又有对象等类型，那是由于浏览器会进行处理 用法： 使用在vue实例对象对应的DOM元素的html的正反标签之间 支持匿名变量 支持三目运算符 数值 支持四则运算 支持比较运算符 支持数值类型的一些内置方法 ...
2、Vue插值表达式
weixin_46841213的博客
04-01 2542
Vue插值表达式1、Vue的插值表达式{{}}2、什么是插值表达式 1、Vue的插值表达式{{}} 主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：Message:{{msg}}Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。 {{}}对JavaScript表达式支持，例如： {{number + 1}} {{ok ? 'yes' : 'n
03-vue基础-插值表达式
hucongcong2015的专栏
05-22 1574
文章目录vue插值表达式vue通过data提供数据通过插值表达式显示数据安装vue开发者工具总结 vue插值表达式 本文要讲解的内容如下： 通过data提供数据 通过插值表达式显示数据 vue开发者工具的安装与使用 vue通过data提供数据 vue中通过template可以提供模板，但是这样的数据是写死的。 vue是数据驱动的，应该如何提供数据，将来控制视图呢？ vue可以通过data提供数据 data必须是一个函数，并且返回一个对象，这个对象就代表vue提供的数据 <script>
vue中插值表达式、v-text、v-html的区别与用法
Dax1_的博客
11-21 2187
1.插值表达式 数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值 <span>Message: {{ msg }}</span> msg的值会从data中传递，而这就造成了在某种情况下的弊端： 当网络环境较差、网速较慢、刷新频繁的时候，插值表达式会出现{undefined{message}}的情况，（之后再用真实的数据替换掉）。因为页面加载是自上而下的，加载到表达式时，可能还没有解析到script标签中的data数据。 解决方法 使用v-clock解决
Vue插值表达式{{}}
alsdiuhfeircn的博客
06-23 4292
https://blog.csdn.net/ZZY1078689276/article/details/83386834
vue 插值表达式如何使用异步函数
06-02
在Vue中，插值表达式可以使用异步函数，但需要注意一些事项。当使用异步函数时，插值表达式会在异步函数返回结果后更新。以下是一个示例： ```html <template> <div>{{ asyncData }}</div> </template> <script> export default { data() { return { asyncData: '' } }, created() { this.getData() }, methods: { async getData() { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1') const data = await response.json() this.asyncData = data.title } } } </script> ``` 在这个示例中，我们使用了异步函数 `getData` 来获取数据。在 `created` 钩子中调用了 `getData` 函数。`getData` 函数使用了 `fetch` 函数来获取数据，并使用 `await` 关键字等待数据返回。最后，将数据赋值给 `asyncData` 属性，插值表达式 `{{ asyncData }}` 会在异步函数返回结果后更新。 需要注意的是，由于插值表达式是响应式的，因此在更新插值表达式时，Vue会自动重新渲染组件。这可能会导致性能问题，因此应该谨慎使用异步函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值