4、模板语法

最新推荐文章于 2023-03-17 08:00:00 发布

hudongdongjava

最新推荐文章于 2023-03-17 08:00:00 发布

阅读量73

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/u012153127/article/details/111034250

版权

vue学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

渲染文本

默认情况下，修改变量的值元素里面的变量值也会随之更改，比如

<div id="app">
			<div>{{message}}</div>
		</div>
		
		<script>
			var data = {
				message:"hello vue"
			};
			var vm = new Vue({
				"el":"#app",
				data:data
			});
			
			vm.message = "update hello vue";
		</script>

此时输出的值是： update hello vue。
如果希望输出的是hello vue的话，只需要加上v-once即可。如下：

<div id="app">
			<div v-once>{{message}}</div>
		</div>
		
		<script>
			var data = {
				message:"hello vue"
			};
			var vm = new Vue({
				"el":"#app",
				data:data
			});
			
			vm.message = "update hello vue";
		</script>

此时输出的值是：hello vue

渲染html

默认情况下，vue将数据解释为文本类型，如下：

<body>
		<div id="app">
			<div>{{html}}</div>
		</div>
		
		<script>
			var data = {
				html:"<span style='color:red'>abc</span>"
			};
			var vm = new Vue({
				"el":"#app",
				data:data
			});
		</script>
	</body>

输出的是：<span style='color:red'>abc</span>。
如果希望以html标签形式输出的话，可以通过v-html设置

<body>
		<div id="app">
			<div v-html="html"></div>
		</div>
		
		<script>
			var data = {
				html:"<span style='color:red'>abc</span>"
			};
			var vm = new Vue({
				"el":"#app",
				data:data
			});
		</script>
	</body>

此时输出的就是:abc，在浏览器上用F12查看样式的话，该div会被解析成

<div id="app">
	<div>hello vue</div> 
	<div><span style="color:red">abc</span></div> 
	<div>&lt;span style='color:red'&gt;abc&lt;/span&gt;</div></div>

v-on缩写

		<a v-on:click="eventName"></a>
		<a @click="eventName"></a>
		<a @[event]="eventName"></a>

<body>
		<div id="app">
			<!--单击事件-->
			<div v-on:click="clickMe">点击我</div>
			<div @click="clickMe">点击我</div>
			<div @[event]="clickMe">点击我</div>
		</div>
		
		<script>
			var data = {
				message:"hello vue",
				event:"click",
				html:"<span style='color:red'>abc</span>"
			};
			var vm = new Vue({
				"el":"#app",
				"data":data,
				"methods":{
					clickMe:function() {
						console.log(this);
					}
				}
			});
		</script>
	</body>

v-bind缩写

<a v-bind:href="url"></a>
<a :href="url"></a>
<a :[key]="url"></a>

示例：

<body>
		<div id="app">
			<!--v-bind缩写-->
			<a v-bind:href="url">url</a>
			<a :href="url">url</a>
			<a :[key]="url">url</a>
		</div>
		
		<script>
			var data = {
				url:"https://baidu.com",
				key:"href"
			};
			var vm = new Vue({
				"el":"#app",
				"data":data
			});
		</script>
	</body>