Vue应用（二）---once、html、bind、on、表达式、缩写、计算属性

最新推荐文章于 2024-06-09 00:45:54 发布

hurricane_li

最新推荐文章于 2024-06-09 00:45:54 发布

阅读量672

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hurricane_li/article/details/80694140

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

vue的部分标签的简单使用v-on、v-bind、v-once、v-html等

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<!-- v-once 控制视图不响应式更新 -->
	<div id="app">
	  <span  v-once>Message: {{ msg }}</span>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		    msg: '<span style="color: red">This should be red.</span>'
		  }
		})
	</script>
	<!-- v-html 控制将返回值作为html处理，而不是字符串 -->
	<div id="app-2">
	  <span v-html="msg">123</span>
	</div>
	<script>
		var app2 = new Vue({
		  el: '#app-2',
		  data: {
		    msg: '<span style="color: red">This should be red.</span>'
		  }
		})
	</script>

	<!-- v-bind 控制vue的数据作用在HTML标签属性上 -->
	<div id="app-3">
	  <button v-bind:disabled="isButtonDisabled">Button</button>
	</div>
	<script type="text/javascript">
		var app3 = new Vue({
		  el: '#app-3',
		  data: {
		    isButtonDisabled: true
		  }
		})
	</script>
	<!-- 若包含vue无法解析的格式，则整个div都不会显示
		 每个绑定都只能包含单个表达式，不能是语句 -->
	<div id="app-4">
	  {{ number + 1 }}
	  {{ ok ? 'YES' : 'NO' }}
	  {{ message.split('').reverse().join('') }}
	  <div v-bind:id="'list-' + id">div</div>
	  <!-- 
	  下面的不是表达式
	  {{ var number = 1 }}	//语句
	  {{ if (ok) { return message } }} -->
	</div>
	<script type="text/javascript">
		var app4 = new Vue({
		  el: '#app-4',
		  data: {
		  	number:1,
		  	ok:true,
		  	message:"Hello vue",
		  	id:'aaa'
		  }
		})
	</script>
	<!-- v-on 控制控件的事件，v-bind 控制控件的属性 -->
	<div id="app-5">
	  <a v-bind:href="url">click here</a>
	  <button v-on:click="reverseMessage">{{message}}</button>
	</div>
	<script type="text/javascript">
		var app5 = new Vue({
		  el: '#app-5',
		  data: {
		    url: 'http://www.baidu.com',
		    message: 'this is message'
		  },
		  methods: {
		    reverseMessage: function(){
		      this.message = this.message.split('').reverse().join('')
		    }
		  }
		})
	</script>
	<!-- 修饰符? -->
	<!-- <form v-on:submit.prevent="onSubmit">...</form> -->
	<!-- 缩写 v-bind缩写为:, v-on缩写为@ -->
	<div id="app-6">
	  <a :href="url">click here</a>
	  <button @click="reverseMessage">{{message}}</button>
	</div>
	<script type="text/javascript">
		var app6 = new Vue({
			el: '#app-6',
			data: {
			  url: 'http://www.baidu.com',
			  message: 'this is message'
			},
			methods: {
			  reverseMessage: function(){
			    this.message = this.message.split('').reverse().join('')
			  }
			}
		})
	</script>

	<!-- 计算属性computed,注意reversedMessage并不是一个函数，只是一个特别的属性，即无法通过app7.reversedMessage()
		 来调用但是可以通过app7.reversedMessage来获取，当获取时，会发现并没有输出invoke字符串，这是因为使用了vue的缓存
	 -->
	<div id="app-7">
	  <p>Original message: "{{ message }}"</p>
	  <p>Computed reversed message: "{{ reversedMessage }}"</p>
	</div>
	<script type="text/javascript">
		var app7 = new Vue({
			el: '#app-7',
			data: {
			  message: 'Hello'
			},
			computed: {
			  reversedMessage: function () {
			  	console.log('invoke');
			    return this.message.split('').reverse().join('');
			  }
			}
		})
	</script>

	
</body>
</html>

hurricane_li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue应用（二）---once、html、bind、on、表达式、缩写、计算属性

vue的部分标签的简单使用v-on、v-bind、v-once、v-html等&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min
复制链接

扫一扫

专栏目录