• 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>
  • 相关阅读:
    经纬度转十进制 、十进制转经纬度 、没有秒
    PowerDesigner使用
    Kafka日志存储原理
    ambari rest api (三)
    ambari rest api (修改集群配置文件)
    使用QJM构建HDFS HA架构(2.2+)
    Hadoop NameNode 高可用 (High Availability) 实现解析
    hadoop2.x Federation
    hdfs HA原理
    使用JSONObject生成和解析json
  • 原文地址:https://www.cnblogs.com/fpcbk/p/10745501.html
Copyright © 2020-2023  润新知