Vue学习笔记(2)——常用指令及使用

Stars-one 2020年10月21日 157次浏览 本篇字数为3,496字

本文为作者原创,转载请注明出处,谢谢配合
作者:Stars-one
链接:https://stars-one.site/2020/10/21/vue-study-2


基本指令

PS:本篇只涉及v-htmlv-bindv-ifv-show

指令说明缩写
v-html输出html文本
v-once只取一次值,之后数据改变页面不会变化
v-bind:[attribute]绑定Html标签元素属性:[attribute]
v-on:[event]绑定监听器@[event]
v-if/v-else判断,添加或删除标签元素
v-show判断,显示或隐藏标签元素
v-for用于循环遍历取值
v-model用于表单相关元素

基本取值

渲染原生Html

前面也提到,我们可以通过{{}}进行取值,但是,如果我们的数据是原生的Html,我们先让其进行渲染,可以使用v-html属性

<div id="app">
	内容为{{message}}
	<br>
	<div v-html="message"></div>
</div>

new Vue({
	el:"#app",
	data:{
		message:"<span style='color:red;'>hello</span>"
	}
});

v-html效果图

v-text可以用来改变标签内容

计算属性

Vue中提供了一种计算属性,简单理解为,就是定义个数据,让其依赖于其他数据,当其他数据发生改变,其才会发生改变,如下面的例子:

<div id="app">
	1+ {{ inputNum }} = {{result}}
</div>

var app = new Vue({
	el: "#app",
	data: {
		inputNum: 5
	},
	computed:{
		//注意使用function
		result : function(){
			//要使用this,否则会报错
			return this.inputNum+1;
		}
	}
});

计算属性效果图

当改变inputNum,结果也会发生改变

改变inputNum

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:

侦听器

除此之外,我们也可以使用watch来实现数据的侦听

var app = new Vue({
	el: "#app",
	data: {
		inputNum: 5
	},
	computed: {
		result: function() {
			return this.inputNum + 1;
		}
	},	
	watch: {
		//oldValue和newValue由自己定义
		//需要注意的是,第一个参数是新的数据,第二个是旧数据
		result: function(newValue, oldValue) {
			console.log(newValue);
			console.log(oldValue);
		}
	}
});

可以侦听Vue的data里的inputNum和计算属性result

v-if与v-show

使用v-show,元素是被渲染出来的,但是该元素是隐藏的(使用了display的css属性进行隐藏),而v-if不满足条件的元素是不会被渲染

v-if

<div id="app">
	<p v-if="flag">这是flag</p>
	<p v-if="flag1">这是flag1</p>
	<p v-if="flag2">这是flag2</p>
</div>

new Vue({
	el:"#app",
	data:{
		flag:true,
		flag1:false,
		flag2:false
	}
});

v-if的效果图

PS:下面演示的使用的JS与上面的一样,贴代码就没有贴出了

v-else

<div id="app">
	<p v-if="flag">这是flag</p>
	<p v-if="flag1">这是flag1</p>
	<p v-else>flag1被显示出来了</p>
	<p v-if="flag2">这是flag2</p>
</div>

PS:v-else必须紧跟这v-if

v-else的效果图

v-else-if

<div id="app">
	<p v-if="flag">这是flag</p>
	<p v-if="flag1">这是flag1</p>
	<p v-else-if="flag2">flag1被显示出来了</p>
	<p v-if="flag2">这是flag2</p>
</div>

v-else-if的效果图

v-show

<div id="app">
	<p v-if="flag">这是flag</p>
	<p v-show="!flag2">不应该显示的flag2</p>
</div>

v-show的效果图

v-bind

v-bind应用的情形有点多,下面一一说明

属性绑定

一般常用设置标签元素的属性,如设置id,设置按钮是否禁用等等

class绑定

v-bind可以用来class绑定

//isActive是Vue的数据,当其为true时,div才有active这个类
<div v-bind:class="{ active: isActive }"></div>

new Vue({
	el:"#app",
	data:{
		isActive:true
	}
});

PS:v-bind:class可以和原生的class属性共存,如下代码示例:

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

style绑定

更推荐使用对象语法,将样式定义在对象里,如下示例:

<div id="app">
	<div v-bind:style="styleObject">
	</div>
</div>

new Vue({
	el:"#app",
	data:{
		styleObject: {
			width:'70px',
			height:'70px',
			backgroundColor: 'red',
			fontSize: '13px'
		  }
	}
});

参考

相关标签