Vue模板语法

最新推荐文章于 2024-06-17 19:25:31 发布

安离九歌

最新推荐文章于 2024-06-17 19:25:31 发布

阅读量2.5k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_62331938/article/details/126669277

版权

本文详细介绍了Vue的模板语法，包括插值（文本、HTML、属性、class与style绑定、表达式）、指令（v-if/v-else/v-else-if、v-show、v-for、v-bind、v-on、v-model）、过滤器（全局与局部过滤器的定义及使用）、计算属性和监听器。通过本文，读者可以全面了解Vue中模板的基本用法。

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

前言

上次分享了Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。

一、插值

1.1、文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3>{
  {msg}}</h3>
		</div>
	</body>
	<script>
		// 绑定边界
		new Vue({
			el: '#app',
			data() {
				return {
					msg: '我真的服了你个老六'
					
				}
			}


		})
	</script>
</html>

1.2、html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3>{
  {msg}}</h3>

			<p>html串</p>

			<div v-html="htmlstr"></div>

			
		</div>
	</body>
	<script>
		// 绑定边界
		new Vue({
			el: '#app',
			data() {
				return {
					msg: '我真的服了你个老六',
					htmlstr: '<span style="color:red;">文本内容</span>'
					
					
				}
			}


		})
	</script>
</html>

1.3、属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3>{
  {msg}}</h3>

			<p>html串</p>

			<div v-html="htmlstr"></div>

			<p>vue 中的属性值</p>

			<input type="text" v-bind:value="val" />

			
		</div>
	</body>
	<script>
		// 绑定边界
		new Vue({
			el: '#app',
			data() {
				return {
					msg: '我真的服了你个老六',
					htmlstr: '<span style="color:red;">文本内容</span>',
					val: 'value值'
					
					
				}
			}


		})
	</script>
</html>

1.4、class、style绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3>{
  {msg}}</h3>

			<p>html串</p>

			<div v-html="htmlstr"></div>

			<p>vue 中的属性值</p>

			<input type=