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

　　假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的：

<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,

            },

        },

        methods: {},

    });

</script>

</body>

</html>

4.计算属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：

转化成日期格式

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

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-show、v-bind、watch的更多相关文章

  1. SIP模块版本错误问题：the sip module implements API v??? but XXX module requires API v???

    系统安装了python 2.7,继续安装PyQt4,于是依次下载sip.pyqt4源码进行安装.用以下代码测试: import PyQt4.QtGui 显示出错.错误信息:the sip module ...

  2. n维向量空间W中有子空间U,V,如果dim(U)=r dim(V)=n-r U交V !={0},那么U,V的任意2组基向量的组合必定线性相关

    如题取U交V中的向量p (p!=0), 那么p可以由 U中的某一组基线性组合成(系数不全是零),同时,-p也可以由V中的某一组基线性组合成(系数不全为零) 考察p+(-p)=0 可知道,U中的这组基跟 ...

  3. XV Open Cup named after E.V. Pankratiev. GP of Tatarstan

    A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...

  4. XVII Open Cup named after E.V. Pankratiev. GP of SPb

    A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...

  5. XVI Open Cup named after E.V. Pankratiev. GP of Ukraine

    A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...

  6. XVI Open Cup named after E.V. Pankratiev. GP of Peterhof

    A. (a, b)-Tower 当指数大于模数的时候用欧拉定理递归计算,否则直接暴力计算. #include<cstdio> #include<algorithm> #incl ...

  7. XVI Open Cup named after E.V. Pankratiev. GP of Siberia

    A. Passage 枚举两个点,看看删掉之后剩下的图是否是二分图. #include <bits/stdc++.h> using namespace std ; const int MA ...

  8. XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg

    A. Avengers, The 留坑. B. Black Widow 将所有数的所有约数插入set,然后求mex. #include<bits/stdc++.h> using names ...

  9. XVI Open Cup named after E.V. Pankratiev. GP of Eurasia

    A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...

  10. XVI Open Cup named after E.V. Pankratiev. GP of SPB

    A. Bubbles 枚举两个点,求出垂直平分线与$x$轴的交点,答案=交点数+1. 时间复杂度$O(n^2\log n)$. #include<cstdio> #include<a ...

随机推荐

  1. Extjs & Ext.net中的一些属性

    Extjs & Ext.Net 弹出整个浏览器对话框的方法 top.Ext.Msg.alert("值"); top.Ext.Msg.confirm("值" ...

  2. 多项式模板&题目整理

    注:多项式的题目,数组应开:N的最近2的整数次幂的4倍. 多项式乘法 FFT模板 时间复杂度\(O(n\log n)\). 模板: void FFT(Z *a,int x,int K){ static ...

  3. 容斥原理——hdu2841

    记得要开ll /* 莫比乌斯反演模板题,也可以直接算phi来做 容斥的解法 求x[1..m],在[1,n]中和其互质的数的个数即可 那么就是n-和x不互质的数个数即可 */ #include<b ...

  4. 【BZOJ 1257】[CQOI2007]余数之和sum

    一道LLJ说他吃*的题. 我实在是太愚蠢了. 传送门

  5. React中的Ajax

    React中的Ajax 组件的数据来源,通常是通过Ajax请求从服务器获取,可以使用componentDidMount方法设置Ajax请求,等到请求成功,再用this.setState方法重新渲染UI ...

  6. LeeCode-Single Number III

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  7. 服务器重启，自动重启httpd

    1. 手动重启 cd http ll cd /etc/httpd/   ll service httpd restart 2. 查看服务器内存使用情况 df -h 3. 自动重启 cat /etc/i ...

  8. LOJ10157——皇宫看守（树形DP）

    传送门:QAQQAQ 题意:在一个树上放置守卫,使每一个节点都至少有相邻一节点放置守卫,使最终经费最少 思路:树形DP 首先会想到没有上司的舞会,0表示不放守卫,1表示放守卫,但考虑到对于当前点不放守 ...

  9. JS基础语法之DOM01(找标签、改属性样式）

    DOM:暂时可以理解为找标签.改样式 1.BOM:   记住location这个就可以: location.href 获得当前页面的URL location.href = "URL" ...

  10. <数据库>MySQL的安装及安装中存在的问题

    无脑三连: 下载:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 解压:任意目录 添加环境变量:WIN10步骤 我的电脑→属性→高级系 ...