zoukankan      html  css  js  c++  java
  • vue的属性样式绑定,

    <template>
      <div id="app">
    
        <div v-html="H"></div>  //绑定html
    
        你好,我是vue<br/>
        {{msg}}
        <hr>{{obj.name}}</hr>
        <h v-bind:title="title">标题</h>
        <h :title="title1">副标题</h>
    
    
    
        <hr>
          <ul> 无序
            <li v-for="item in items">  //是两级列表
              {{item.title}} 第一级内容
                <ol> 有序 
                  <li v-for="(per,key) in item.person"   :class="{red:key==0,blue:key==1}">  v-for遍历元素,key是每一项索引,这里作用来获取第一项和第二项改变字体颜色   
                    {{per.name}}   -----------第二季内容
    {{key}} </li> </ol> </li> </ul> </hr>

    <div class="isdanger" v-bind:class="[{active:isactive},isantive]" v-bind:style="stylesheet">这是绑定class属性</div> </div> </template>
    <script>

    export default
    { name: 'app', data () {
    return
    { msg:
    '', obj:{name:'小班'},
    items:[{
    "title":"编辑", "person":[ {"name":"小明"},{"name":"小芳"},{"name":"小仅"} ]},
    { title:
    "开发", "person":[{"name":"大明"},{"name":""},{"name":""}] } ],
    title:
    "这是vue的api", title1:"这是副标题", isactive:true, stylesheet:{ color:"red", fontSize:'40px' },
    H:
    "<h2>我是</h2>" } } } --------------绑定html,让前台解析用v-html

    </script>
    <style>
    .red{ color:red } .blue{ color:blue }

    </style>
  • 相关阅读:
    POJ
    UPC-5843: 摘樱桃(最优状态递推)
    BZOJ-1088 [SCOI2005]扫雷Mine(递推+思维)
    HDU-3065 病毒侵袭持续中(AC自动机)
    BZOJ-4236 JOIOJI (map查找+思维)
    HDU-2896 病毒侵袭(AC自动机)
    Hrbust-2060 截取方案数(KMP)
    UVALive 4490 压缩DP
    UVALive 5881
    UVALive 4168
  • 原文地址:https://www.cnblogs.com/fpcbk/p/10745501.html
Copyright © 2011-2022 走看看