博客地址 ：https://www.cnblogs.com/sandraryan/

声明式的渲染,以{{}}的形式调用数据

  1.  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>介绍vue</title>
</head>
<body>
    <div id="app">
        <!-- vue是声明式的渲染，用双大括号调用,data中的数据会被通过双花括号调用 -->
        <p>{{num}}</p>
        <!-- 标签内也可以写表达式,num大于10 显示10，否则显示num -->
        <p>{{ num > 10 ? 10 : num}}</p>
        <p>{{ num || 'you'}}</p>
        <!-- v-html 指令渲染 会被解析为自定义属性-->
        <p v-html = 'num'></p>
        <p v-if = 'num ===2'>if</p>
        <p v-else>else</p>
        <!--    v-if 控制要不要创建这个节点，v-show控制要不要显示这个节点 display : none-->
        <!-- else和if 会自动互斥，else 会自动match最近的if -->
        <p v-else>another else</p>
        <p v-show = 'true'>23333</p>
        <p v-show = 'false'>404</p>
    </div>
    <!-- 在#app中的内容才会被承认vue语法，没有连接到vue原型 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
    const app = new Vue({
        el : '#app',
        data : {
            num: 
        }
    });
    </script>
</body>
</html>

vue2——指令渲染，{{}}渲染的更多相关文章

  1. Vue2服务端渲染

    Vue2 服务端渲染 花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500 ...

  2. angular中关于自定义指令——repeat渲染完成后执行动作

    业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...

  3. WebGL的颜色渲染-渲染一张DEM(数字高程模型)

    目录 1. 具体实例 2. 解决方案 1) DEM数据.XYZ文件 2) showDEM.html 3) showDEM.js 4) 运行结果 3. 详细讲解 1) 读取文件 2) 绘制函数 3) 使 ...

  4. layui下拉框数据过万渲染渲染问题解决方案

    方案一:layui下拉框分页插件 https://fly.layui.com/jie/29002/ 此插件我用了下浏览器缓存有问题,而且当下拉框数据量过万后,会一直渲染不出来,期待后期作者优化 如图下 ...

  5. 如何使用Vue2做服务端渲染

    花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SS ...

  6. CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL

    CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL +BIT祝威+悄悄在此留下版了个权的信息说: 开始 本文用step by step的方式,讲述如何使 ...

  7. Unity渲染优化中文翻译（一）——定位渲染问题

    最近有一点个人的时间,尝试一下自己翻译一下英文的 Optimizing graphics rendering in Unity Games, 这儿附上英文链接: 个人英文水平有限,unity图像学知识 ...

  8. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  9. 从vue渲染想到的数组方法

    <div id="app"> <ul> <li v-for='item in goods'>{{item}}</li> </u ...

随机推荐

  1. java.lang.ClassCastException: java.io.ByteArrayInputStream cannot be cast to java.io.FileInputStream

    今天在做文件上传的时候遇到一个这样的问题 java.lang.ClassCastException: java.io.ByteArrayInputStream cannot be cast to ja ...

  2. 页面PC端 / 移动端整屏纵向翻页，点击/触摸滑动效果功能代码非插件

    页面翻页,滑动功能示范代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. bzoj 1024 [SCOI2009]生日快乐——模拟

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1024 可以枚举这边放多少块.那边放多少块. 注意精度.不要每次用x*y/base算有多少块, ...

  4. 批处理启动应用程序（win）

    @echo off net session >nul 2>&1 " ( echo Oops: This tools must run with administrator ...

  5. 在notepad++中tab和空格的区别

    在notepad++中实现tab和空格不通用的问题 方式一: 方式二:

  6. NOIP模拟 17.8.14

    NOIP模拟17.8.14 (天宇哥哥考察细心程度的题) [样例解释]如果删去第一个 1:在［3,1,2］中有 3 个不同的数如果删去 3:在［1,1,2］中有 2 个不同的数如果删去第二个 1:在［ ...

  7. 利用IE浏览器查看元素绑定的JS代码

  8. 并发模式与 RPS 模式之争，性能压测领域的星球大战

    本文是<如何做好性能压测>系列专题分享的第四期,该专题将从性能压测的设计.实现.执行.监控.问题定位和分析.应用场景等多个纬度对性能压测的全过程进行拆解,以帮助大家构建完整的性能压测的理论 ...

  9. Sublime Text 2 快捷键用法大全

    Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑) Ctrl+G 跳转到相应的行 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl+L 选择整行(按住-继续 ...

  10. 【JZOJ4747】【NOIP2016提高A组模拟9.3】被粉碎的线段树

    题目描述 输入 第一行包括两个正整数,N ,M ,分别表示线段树的宽以及询问次数. 以下N-1 行以先序遍历(dfs深搜顺序)描述一个小R线段树,每行一个正整数表示当前非叶子节点的 mid,保证每个节 ...