跟着网上学Vue之插值

最新推荐文章于 2024-03-27 14:13:50 发布

Jafe_ZWJ

最新推荐文章于 2024-03-27 14:13:50 发布

阅读量196

点赞数

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

本文链接：https://blog.csdn.net/qq_38605145/article/details/105246291

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

插值

文本插值

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

以下内容在body标签中

//vue引用
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
//Html
<div id="hv">
			<h1>{{title}}</h1>
			<h3>{{message}}</h3>
			<h5>{{way()}}</h5>
			
		</div>

<script type="text/javascript">
			//1.创建vue对象
			var helloVue=new Vue({
				el:'#hv',//首先获取标签
				data:{//填写数据
					title:'跟着网站学vue',
					message:'内容都从网上搜集来的'
				},
				methods:{
					way:function()
					{
						return 'Hi!Bro.'+"welcome to the title 	"+this.title;
					}
				}
			});
			document.write(helloVue.$data.message);
		</script>

Vue 实例提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

运行结果图：

在这里插入图片描述

v-html
使用 v-html 指令用于输出 html 代码

代码演示：

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<div id="hv" v-html="htmlcode">
	</div>
	<script type="text/javascript">
		//1.创建vue对象
		var helloVue=new Vue({
			el:'#hv',//首先获取标签
			data:{//填写数据
				htmlcode: '<h1>I am Jafe!</h1>'
				
			}});
			
	</script>

效果图：
在这里插入图片描述

v-bind（属性）

HTML 属性中的值应使用 v-bind 指令。

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.class1{
				background-color: aqua;
				
			}
		</style>
	</head>
	<body>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test">
			
			<label>颜色修改</label><input type="checkbox" v-model="mess"/>
			<div id="" v-bind:class="{'class1':mess}">
				这是演示框
			</div>
			<script type="text/javascript">
				var v = new Vue({
					el:'#test',
					data:{
						mess:false
					}
				});
			</script>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

其中v-bind:class="{'class1':mess}可以缩写成：:class="{'class1':mess}
4. 表达式

body标签内写

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test">
			{{3+7+8}}<br>
			{{mess?'ok':'no'}}<br>
			{{info.split('').reverse().join('')}}
			<span v-bind:id="'list-'+id">
				
			</span>
			</div>
			<script type="text/javascript">
				var v = new Vue({
					el:'#test',
					data:{
						mess:false,
						info:'Jafe',
						id:1
					}
				});
			</script>

在这里插入图片描述

指令
指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test" >
			<span v-if="saw">现在你能看到我</span>
			</div>
			<script type="text/javascript">
				var v = new Vue({
					el:'#test',
					data:{
						saw:true
					}
				});
			</script>
		</div>

在这里插入图片描述
可修改saw值查看变化。

参数

参数在指令后以冒号指明

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test" >
			<a v-bind:href="url">欢迎进入我的博客</a>
			
			</div>
			<script type="text/javascript">
				var v = new Vue({
					el:'#test',
					data:{
						url:'https://blog.csdn.net/qq_38605145'
					}
				});
			</script>

点击文字便会跳转到我的博客（嘻嘻嘻~~~）
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

修饰符

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

v-on:click可以缩写为：@click

补充——循环

v-for 指令可以绑定数组的数据来渲染一个项目列表

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="test">
			<ul>
				<li v-for="todo in todos">
					{{todo.text}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el:'#test',
				data:{
					todos:[{text:'Jafe'},
						{text:'Charlotte'},
						{text:'哈哈哈'}]
				}
			});
		</script>

效果图：
在这里插入图片描述

Jafe_ZWJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟着网上学Vue之插值

插值文本插值数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值以下内容在body标签中//vue引用<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>//Html<div id="hv"> <h1>{{title}...
复制链接

扫一扫