Vue基础第三讲笔记：v-text、v-html、v-on

最新推荐文章于 2023-12-18 22:51:58 发布

TraceurZzl

最新推荐文章于 2023-12-18 22:51:58 发布

阅读量530

点赞数 1

分类专栏： (HM)Vue 文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_49956121/article/details/120586016

版权

本文详细介绍了Vue中的v-text指令，用于设置标签内容，支持表达式；v-html指令用于设置元素的innerHTML，可以解析HTML标签；以及v-on指令，用于事件绑定，简写为@，方法定义在methods中，可通过this访问data数据。

摘要由CSDN通过智能技术生成

一、v-text指令

设置标签的内容。

特点：
1、默认写法会替换全部内容，使用插值表达式{ { }}可以替换指定内容。
2、内部支持写表达式。

注意：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{
   {
    message }}哈哈
			<h2 v-text="message+'字符串拼接'"></h2> 
			<h2 v-text="info">哈哈</h2>
		</div>
		<!-- 导入开发版本的Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({