2.5 Vue的属性绑定

Qwe7

发布于 2022-07-20 20:10:43

1.3K0

文章被收录于专栏：网络收集网络收集

2.5 Vue的属性绑定

Vue提供了多个关键字，能快速的将数据对象中的值绑定在视图层中。

a.v-model

通过v-model将标签的value值与vue对象中的data属性值进行绑定。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="title">
			{{title}}
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				title:"hello vue"
			}
		})
	</script>
</html>

此时input标签中加入了“v-model='title'”，表示input的value值与vue对象中的title属性绑定，当在input输入框中输入内容会实时修改title的值。于是{{title}}插值表达式能实时输出input输入框内的值。

b.v-bind

我们知道插值表达式是不能写在html的标签的属性内的，那如果一定要用vue中的属性作为html标签的属性的内容，就可以通过v-bind进行属性绑定。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="link"></a>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				link:'http://www.baidu.com'
			}
		})
	</script>
</html>

这样，a标签内的href属性就可以使用vue对象中的属性值。

注意： v-bind也可以简写，使用冒号“:”来代替。

2.6 事件绑定

关于事件，要把握好三个步骤：设参、传参和接参。

a.普通演示

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			sum={{sum}}<br/>
			{{sum>10?'总数大于10':'总数不大于10'}}<br/>
			<button type="button" @click="increase(2)">增加</button>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				sum:0
			},
			methods:{
				increase:function(s){
					this.sum+=s
				}
			}
		})
	</script>
</html>

从这里例子中：

- 设参：

- 传参：

increase:function(s)

- 接参：

this.sum+=s

b.v-on

通过配合具体的事件名，来绑定vue中定义的函数

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-on:click="changeMajor"  />
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
    		el:'#app',
    		data:{
        		major:'java'
    		},
    		methods:{
        		sayHi:function(){
            		alert("HELLO VUE!");
        		},
        		changeMajor:function(){
            		console.log("change Title")
        		}
    		}
	</script>
</html>

此时，该按钮，在点击时将会调用Vue对象中定义的changeMajor方法。

注意： v-on也可以简写，使用"@"替代。

c.事件修饰符

可以使用Vue中定义好的事件修饰符，快速达到效果。查看以下例子：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<p @mousemove="mm">
				x:{{x}}
				y:{{y}}
				<span @mousemove.stop>鼠标移动到此即停止</span>
			</p>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				x:0,
				y:0
			},
			methods:{
				mm:function(event){
					this.x = event.clientX;
					this.y = event.clientY;
				},
				stopm:function(event){
					event.stopPropagation();
				}	
			}
		})
	</script>
</html>

当鼠标经过P标签区域内时，区域内就会显示X和Y轴的坐标，如果经过P标签内的Span标签内时，此时会调用事件属性mousemove.stop预定的效果，鼠标移动的效果将会被取消，X和Y不再显示信息。

d.计算属性：computed

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局篇 计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>

<div id="vue">
    <p>调用当前时间的方法：{{currentTime1()}}</p>
    <p>当前时间的计算属性：{{currentTime2}}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: 'Hello Vue'
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

[说明]()

- methods：定义方法，调用方法使用 currentTime1()，需要带括号

- computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化

注意：methods 和 computed 里不能重名

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js