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. JS流程控制语句 反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。

    反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足. while语句结构: while(判断条件) { 循环语句 } 使用w ...

  2. innerHTML 属性用于获取或替换 HTML 元素的内容。

    innerHTML 属性 innerHTML 属性用于获取或替换 HTML 元素的内容. 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.g ...

  3. JavaScript变量名与函数名的命名规范

    JavaScrip变量名与函数名的命名规范严格遵循以下5条: (1)首字符必须是字母.下划线.$,后跟任意的字母.数字.下划线.$ (2)严格区分大小写 (3)不能使用系统的关键字和保留字 (4)命名 ...

  4. ThinkPHP支持模型的分层

    ThinkPHP支持模型的分层 ,除了Model层之外,我们可以项目的需要设计和创建其他的模型层. 大理石平台支架 通常情况下,不同的分层模型仍然是继承系统的\Think\Model类或其子类,所以, ...

  5. arguments的介绍（一）

    arguments 是一个类数组对象.代表传给一个function的参数列表. 1.1 arguments length arguments 是个类数组对象,其包含一个 length 属性,可以用 a ...

  6. Java常用英语汇总(面试必备)

    Java常用英语汇总(面试必备) abstract (关键字)             抽象 ['.bstr.kt] access                            vt.访问,存 ...

  7. VS2010-MFC（利用MFC向导生成单文档应用程序框架）

    一.VC++与MFC 讲VC++免不了要提MFC,MFC全称Microsoft Foundation Classes,也就是微软基础类库.它是VC++的核心,是C++与Windows API的结合,很 ...

  8. 如何提高Axure设计的效率 提高Axure设计效率的10条建议

    如何更有效率的使用axure,这是新手需要掌握的技能.本文作者从实际经验中归纳出来的十条建议十分值得学习,转载分享给大家: Axure 是创建软件原型的快速有力的工具.上手很容易,但是,其中存在一个危 ...

  9. cmake 2.8.12在redhat 4.4下安装

    以前安过,忘了,今天记笔记这里

  10. logcat日志文件

    android日志系统提供了记录和查看系统调试信息的功能,日志都是从各个软件和一些系统的缓冲区中记录下来的,缓冲区可以通过logcat命令来进行查看和使用 开发者选项,有个选项叫做“日志记录器缓冲区大 ...