vue.js计算属性

liu1992452008

于 2017-11-21 13:10:00 发布

阅读量409

点赞数

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/78570221

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>

	</head>
	<style type="text/css">
		#app {
			margin: 50px auto;
			width: 500px;
			
		}
		fieldset{
			border: 1px solid orange;
		}
		fieldset input{
			width: 400px;
			height: 30px;
			margin: 10px 0;
			
		}
		table{
			width: 500px;
			border: 1px solid orange;
			text-align: center;
			margin-top: 40px;
		}
		thead{
			background-color: orange;
			color: white;
		}
		button{
			width: 90px;
			height: 40px;
			background-color: rosybrown;
		}
	</style>

	<body>
		<div id="app">
	
          <p>初始值{{name}}</p>
          <p>翻转值{{name.split('').reverse().join('')}}</p>
          <p>函数值{{reverseStr()}}</p>
            <p>计算属性{{reverse()}}</p>
		</div>
			<script type="text/javascript">
				new Vue({
					el: '#app',
					data: {
						name:'Rose Jack'				
					},
					methods:{
						reverseStr(){
							return this.name.split('').reverse().join('')
						}
					},
					//计算属性getfan
					computed:{
						reverse(){
							return this.name.split('').reverse().join('')
						}
					}
			
					
				})
			</script>
	</body>

</html>