1.v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
1>遍历一个users数组
<!-- ve-for -->
<ul>
<li v-for="(value,key) in users">
{{key}}-{{value.name+","+value.gender+","+value.age}}
</li>
</ul>
2>遍历数组中的一个对象 要比遍历数组多一个属性 I
<!--遍历对象比遍历数组 多一个key-->
<ul>
<li v-for="(value,key,i) in users[0]">
{{i+":"+key+"-"+value}}
</li>
</ul>
3>遍历数字
<!--遍历数字-->
<ul>
<li v-for="i in 5">
{{i}}
</li>
</ul>
2.v-if,v-else和v-show
1>.v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
v-if和v-show的区别
<!-- v-if -->
<button v-on:click="show = !show">点击切换</button><br/>
<!-- v-if 直接删除该标签 -->
<h1 v-if="show">
你好
</h1>
<!-- v-show 只是修改 display:none的属性值 -->
<h1 v-show="show">
你好
</h1>
2>v-if,v-else和v-for的混合使用
<ul>
<li v-for="i in 5" v-if="i%2===0">
{{i}}
</li>
</ul>
<ul>
<li v-for="i in 5" >
<span v-if="i%2===0">{{i}}是:偶数</span>
<span v-else>{{i}}是:奇数</span>
</li>
</ul>
以上案例<script>中的代码
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//element
data: {
users: [
{name: ‘1‘, gender: ‘女‘, age: 21},
{name: ‘2‘, gender: ‘男‘, age: 30},
{name: ‘3‘, gender: ‘女‘, age: 24},
{name: ‘4‘, gender: ‘女‘, age: 18},
{name: ‘5‘, gender: ‘女‘, age: 25}
],
show:true
},
methods: {},
});
</script>
3.v-bind
<div class="{{isAcctive}}"></div>
因为插值表达式不能用在属性的值中。
Vue对class属性进行了特殊处理，可以接收数组或对象格式：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div #box, #box1 {
width: 100px;
height: 100px;
color: chartreuse;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<!-- v-bind 把html的属性变成vue的特有属性 缩写 v-bind= : -->
<div id="app">
<input type="button" v-on:click="color=‘red‘" value="红色">
<input type="button" v-on:click="color=‘blue‘" value="蓝色">
<div id="box" v-bind:class="color">我是盒子</div>
<input type="button" v-on:click="isRed=!isRed" value="点我切换颜色">
<div id="box1" v-bind:class="{red:isRed,blue:!isRed}">我是盒子</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element,vu作用的标签
data: {
color: "red",
isRed: true,
birthday: 1429032123201, // 毫秒值
num: 1,
person: {
name: "hdh",
age: 20,
},
},
methods: {},
});
</script>
</body>
</html>
4.计算属性
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：
转化成日期格式
data:{
birthday:1529032123201 // 毫秒值
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--计算属性-->
<h1>
<!-- 计算属性 是属性不是函数 不需要加括号-->
您的生日:{{brith}}
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element,vu作用的标签
data: {
},
methods: {},
computed: {
brith: function () { // 计算属性本质是一个方法，但是必须返回结果
const day = new Date(this.birthday)
return day.getFullYear() + "年" + day.getMonth() + "月" + day.getDay() + "日"
}
},
});
</script>
</body>
</html>
5.watch
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element,vu作用的标签
data: {
color: "red",
isRed: true,
birthday: 1429032123201, // 毫秒值
num: 1,
person: {
name: "hdh",
age: 20,
},
},
methods: {},
computed: {
},
watch: {
/*浅度监控 当num属性发生改变时打印改变前和改变后的值*/
num: function (val, valOld) {
console.log(val, valOld)
},
/*深度监控 对数组中的属相进行监控*/
firstName:function () {
deep:true,
handler(val)
console.log(val.age)
},
},
});
</script>
</body>
</html>
TZ_16_Vue的v-for、v-if、v-hsow、v-bind、watch
原文：https://www.cnblogs.com/asndxj/p/11502623.html