zoukankan      html  css  js  c++  java
  • Vue(从简单到入门,从入门到放弃)

    方法一:
    html:
    <div id="my_vue">{{message}}</div>
    js:
    var my_vue=new Vue({
    el:'#my_vue',
    data:{
    message:'jay'
    }
    })
    方法二:
    html:
    <div id="my_vue">{{message}}</div>
    js:

    var x=document.getElementById('my_vue')
    var my_vue=new Vue({

    data:{
    message:'jay'
    }
    })
    my_vue.$mount(x);

    添加类名:

    一、对象语法:

    <div id="app" v-bind:class="{'a':aa,'b':bb}"></div>

    data:{

    aa: true,
    bb: true

    }

    二、数组语法:

    <p v-bind:class="[x,y]"></p>

    data:{

    x:'a',
    y:'b'

    }

    添加html:
    <p v-html="xm"></p>

    data:{

    xm:'<div>我是插入的div</div>'

    }

    <!--添加css样式-->

    方法一:
    <p v-bind:style="{color:my_color,fontSize:my_font}">你是傻逼</p>

    data:{

    my_color:'red',
    my_font:20+'px'

    }

    方法二:

    <p v-bind:style="my_style">啊,你再说一次</p>

    data:{

    my_style:{
    color:'yellow',
    fontSize:25+'px'
    }

    }

    方法三:

    <p v-bind:style="[my_style,my_style2]">你还是傻逼</p>

    data:{

    my_style:{
    color:'yellow',
    fontSize:25+'px'
    },
    my_style2:{
    background:'red'
    }

    }

    v-if:

    <h1 v-if="ok">{{name}}</h1>

    data:{

    name: 'jay',
    ok: true

    }

    v-show:

    <h2 v-show="show">{{name}}</h2>

    data:{

    name: 'jay',
    show: false

    }

    有空再补上!

  • 相关阅读:
    6-2 铁轨 uva 514
    并查集基础
    周练7
    周练5
    周练4
    二分查找
    周练3
    2-7 使用不同方式进行定位.py
    2-6 使用title_contains检查页面是否正确
    启用不同浏览器.py
  • 原文地址:https://www.cnblogs.com/LWJ-booke/p/7148960.html
Copyright © 2011-2022 走看看