zoukankan      html  css  js  c++  java
  • Vue常用指令:

    v-text:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    </head>
    <body>
    <div id="app" v-text="greeting"></div>
    <script>
    // 数据模板引擎:
    // v-开头的指令是帮助我们渲染数据用的
    new Vue({
    el:"#app",
    data:{
    greeting:"Hello Vue",
    }
    })
    </script>
    </body>
    </html>
    v-html:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    </head>
    <body>
    <div id="app" v-html="greeting"></div>
    <script>
    // 数据模板引擎:
    // v-开头的指令是帮助我们渲染数据用的
    new Vue({
    el:"#app",
    data:{
    greeting:"<h1>Hello Vue</h1>",
    }
    })
    </script>
    </body>
    </html>
    v-for:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    <ul>
    <li v-for="aihao in funingbo">{{ aihao }}</li>
    </ul>
    <ul>
    <li v-for="student in students">姓名:{{ student.name }},年龄:{{ student.age }},爱好:{{ student.hobby}}</li>
    </ul>
    </div>
    <script>
    // 数据模板引擎:
    // v-开头的指令是帮助我们渲染数据用的
    new Vue({
    el:"#app",
    data:{
    funingbo:["披黄袍","吃鸡","大鱼大肉","骑士"],
    students:[
    {
    name:"张敏聪",
    age:28,
    hobby:"girls",
    },
    {
    name:"徐卫星",
    age:35,
    hobby:"oldboy",
    },
    {
    name:"赵岩",
    age:21,
    hobby:"sao",
    }
    ]
    }
    })
    </script>
    </body>
    </html>
    v-if:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    <div v-if="role == 'cainingning'">
    <h1>欢迎美女光临~~~</h1>
    </div>
    <div v-else-if="role == 'juyingying'">
    <h1>欢迎美女再次光临~~~</h1>
    </div>
    <div v-else>
    <h1>gun</h1>
    </div>
    </div>
    <script>
    // 数据模板引擎:
    // v-开头的指令是帮助我们渲染数据用的
    new Vue({
    el:"#app",
    data:{
    role:"cainingning"
    }
    })
    </script>
    </body>
    </html>
    v-show:
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    <div v-show="isShow">Hello Vue</div>
    </div>
    <script>
    // 数据模板引擎:
    // v-开头的指令是帮助我们渲染数据用的
    let vm = new Vue({
    el:"#app",
    data:{
    isShow:false
    }
    })
    </script>
    </body>
    </html>
    v-bind:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    <style>
    .active {
    500px;
    height: 500px;
    background-color: lawngreen;
    }
    </style>
    </head>
    <body>
    <div id="app">
    <a v-bind:href="jingdong" >去京东</a>
    <div :class="{ active : isActive }"></div>
    <div :class="[ isActive ]"></div>
    </div>
    <script>
    // 数据模板引擎:
    // v-开头的指令是帮助我们渲染数据用的
    let vm = new Vue({
    el:"#app",
    data:{
    jingdong:"https://www.jd.com",
    isActive:true,
    }
    })
    </script>
    </body>
    </html>
     
  • 相关阅读:
    ubuntu之路——day8.4 Adam自适应矩估计算法
    ubuntu之路——day8.3 RMSprop
    ubuntu之路——day8.2 深度学习优化算法之指数加权平均与偏差修正,以及基于指数加权移动平均法的动量梯度下降法
    ubuntu之路——day8.1 深度学习优化算法之mini-batch梯度下降法
    ubuntu之路——day7.4 梯度爆炸和梯度消失、初始化权重、梯度的数值逼近和梯度检验
    redis作为mysql的缓存服务器(读写分离)
    阿里云服务器上配置并使用: PHP + Redis + Mysql 从配置到使用
    小程序开发测试教程
    使用PHP并发执行任务–curl_multi应用
    PHP返回变量或数组的字符串表示:var_export()
  • 原文地址:https://www.cnblogs.com/zhang-da/p/12172869.html
Copyright © 2011-2022 走看看