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>
     
  • 相关阅读:
    用于主题检测的临时日志(594fb726-af0b-400d-b647-8b1d1b477d72
    返璞归真vc++之字符类型
    DIV居中
    程序员职业生涯
    枚举进程句柄
    不使用mutex设计模式解决并发访问cache
    服务器权重分配算法
    xmemecached中的一致性hash算法
    安卓课堂练习
    pythonPTA---分支循环与集合7-1 jmu-python-韩信点兵 (20分) 7-2 打印数字矩形 (10分) 7-3 成绩统计 (10分) 7-4 找列表中最大元素的下标 7-5 删除列表中的重复值
  • 原文地址:https://www.cnblogs.com/zhang-da/p/12172869.html
Copyright © 2011-2022 走看看