前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.js 模板(核心)

vue.js 模板(核心)

作者头像
贵哥的编程之路
发布2021-03-02 15:45:00
2.9K0
发布2021-03-02 15:45:00
举报
文章被收录于专栏:用户7873631的专栏
代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		    <script type="text/javascript" src='vue.min.js'></script>
	</head>
	<body>
		<input type="button" value="点我" @click="fn"/>
		{{msg}}
		<script type="text/javascript">
			new Vue(
				{
					el:'body',
					data:{
						msg:'hello'
					},
					methods:
					{
						fn:function()
						{
							this.msg='changed'
						}
					}
				}
			);
		</script>
	</body>


</html>

解释:

在这里插入图片描述
在这里插入图片描述

点击就变成changed,然后就没有然后了。

效果:

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		    <script type="text/javascript" src='vue.min.js'></script>
			<style type="text/css">
				div{width: 100px;height: 100px;background: black;color:white;}
			
			</style>
	</head>
	<body>
		<input type="button" value="点我" @click="fn"/>
		{{{msg}}}
		<script type="text/javascript">
			new Vue(
				{
					el:'body',
					data:{
						msg:'<div>hehehe</div>'
					},
					methods:
					{
						fn:function()
						{
							this.msg='changed'
						}
					}
				}
			);
		</script>
	</body>

解释:

{{}}代表输出文本. {{{}}}代表输出效果

效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/02/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解释:
  • 效果:
  • 解释:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档