Vue模板语法（一）-CSDN博客

本文链接：https://blog.csdn.net/qq_45510899/article/details/108029732

插值

文本插值---{{}}

<div id="app">
			<ul>
				<li>
					<h2>文本</h2>
					{{msg}}
				</li>
			</ul>
</div>

<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello vue!',
			}
		})
	</script>

在这里插入图片描述

html渲染---v-html

<div id="app">
			<ul>
				<li>
					<h2>html渲染</h2>
					<div v-html="htmlStr"></div>
				</li>
			</ul>
</div>

<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello vue!',
				htmlStr: '<span style="color: pink;">粉色</span>',
			}
		})
	</script>

在这里插入图片描述
v-bind属性绑定指令----v-bind可简写成：

<div id="app">
			<ul>
				<li>
					<h2>v-bind属性绑定指令</h2>
					<input type="text" v-bind:value="age" />
					<!--<input type="text" :value="age" />-->
				</li>
			</ul>
</div>

<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello vue!',
				htmlStr: '<span style="color: pink;">粉色</span>',
				age: 123456,
			}
		})
	</script>

在这里插入图片描述
v-bind动态绑定数据

<div id="app">
			<ul>
				<li v-bind:id="'list-'+id">zzz</li>
			</ul>
</div>

<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello vue!',
				htmlStr: '<span style="color: pink;">粉色</span>',
				age: 123456,
				str: 'hello vue!!',
				number: 123,
				ok: 1 != 2,
				id: '1',
			}
		})
	</script>

在这里插入图片描述

表达式

            <div id="app">
			  <ul>
				<li>
					<h2>表达式</h2>
					{{str.substr(0,6).toUpperCase()}}
					{{number+1}}
					{{ok?"YES":"NO"}}
				</li>
			  </ul>
		</div>

<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello vue!',
				htmlStr: '<span style="color: pink;">粉色</span>',
				age: 123456,
				str: 'hello vue!!',
				number: 123,
				ok: 1 != 2,
			}
		})
	</script>

在这里插入图片描述

过滤器

局部过滤器

<div id="app">
		<ul>
			<li>
				<h2>局部过滤器的注册</h2>
				{{xxx|a}}
				{{xxx|c}}
			</li>
		</ul>
	</div>

<script type="text/javascript">
		new Vue({
			el: '#app',
			data:{
				msg:'HelloVue!!!',
				xxx:'HelloWorld!!!',
			},
			filters:{
				//a是过滤器名字,后面函数是过滤器作用
				'a':function(v){
					console.log(v);
					return v.substring(0,5);
				},
				'b':function(v){
					console.log(v);
					return v.substring(5,10);
				}
			}
		})
		
	</script>

在这里插入图片描述
局部过滤器的串联

{{msg|a|b}}

这条html代码意思就是先按a过滤器过滤，得到结果再按b过滤器过滤

全局过滤器的注册

Vue.filter('c',function(v){
			console.log(v);
			return v.substring(0,5);
		})

监听、计算属性

监听（watch）、计算（computed）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听属性计算属性</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h2>计算属性</h2>
					单价：<input v-model="price" />
					数量：<input v-model="num" />
					总价：{{total}}
				</li>
				<li>
					<h2>监听属性</h2>
					km:<input v-model="km" />
					m:<input v-model="m" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				price: 16,
				num: 1,
				km:1,
				m:1000
			},
			computed: {
				total() {
					return parseInt(this.price) * parseInt(this.num);
				}
			},
			watch: {
				km(v) {
					this.m = v * 1000;
				},
				m(v) {
					this.km = v / 1000;
				}
			}
		})
	</script>
</html>

指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h2>分支</h2>
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else="">C</div>
					<input type="text" v-model="score" />
				</li>
				<li>
					<h2>v-show指令</h2>
					<div v-show="flag">显示</div>
				</li>
				<!-- v-if和v-show的区别
				     v-if控制的是标签是否打印
					 v-show控制的是标签的样式
				 -->
				<li>
					<h2>v-for指令</h2>
					<div v-for="item,index in data1">
						{{item}}~~~{{index}}
					</div>
					<hr />
					<div v-for="item,index in data2">
						{{item.id}}{{item.name}}~~~{{index}}
					</div>
				</li>
				<li>
					<h2>事件调用</h2>
					<button v-on:[evname]="xxx">动态事件调用</button>
					<input type="text" v-model="evname" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello vue!',
				score: 81,
				flag: 1 != 2,
				data1: [1, 3, 6, 9, 14],
				data2: [{
					id: 1,
					name: '篮球'
				},
				{
					id: 2,
					name: '跳'
				}],
				evname:'click'
			},
			methods:{
				xxx(){
					console.log("xxx方法被调用");
				}
			}
		})
	</script>
</html>