zoukankan      html  css  js  c++  java
  • vue.js 的绑定数据属性等。(还有循环缩写等等)

    <template>
      <div >
        <!--绑定数据-->
         <div v-bind:title="title">鼠标悬停</div>
        <br>
        <!--绑定链接路由地址-->
        <img v-bind:src="url" >
        <!--缩写绑定地址-->
        <img :src="url" >
        <!--绑定页面标签带文字-->
        <div v-html="h"></div>
        <!--绑定文本-->
        <div v-text="msg"></div>
        <!--绑定属性-->
        <div :class="{'red':flag}">
          我是一个div
        </div>
        <!--绑定属性,和属性的判断-->
        <div :class="{'red':flag,'blue':!flag}">
          我是一个div
        </div>
        <!--循环中判断并给到想要的标签属性-->
        <ul>
          <li v-for="(item,key) in list" :class="{'red':key==0}">
              {{key}}----{{item}}
          </li>
        </ul>
        <!--绑定属性并给属性赋予一个可变值-->
        <div class="box" v-bind:style="{'width':boxWdith+'px'}">
          啊啊 好一朵美丽地茉莉花
        </div>
      </div>
    
    </template>
    
    <script>
      export default{
        data() {
          return{
            // 数据
            msg:"你好VUE",
            // 文本
            title:'我是一个title',
            // 路由
            url:"//www.baidu.com/img/baidu_jgylogo3.gif",
            // 标签带文字
            h:"<h2>我是一个h2</h2>",
            // 判断值
            flag:false,
            // 数组,上面循环用
            list:['11111','2222','3333'],
            //
            boxWdith:300
          }
        }
      }
    </script>
    
    <style>
      /*样式*/
      .red{
        color: red;
      }
      .blue{
        color: blue;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  • 相关阅读:
    SQL获取当天0点0分0秒和23点59分59秒方法
    全球唯一标识符 System.Guid.NewGuid().ToString()
    Js获取当前日期时间及其它操作
    MySQL日期函数与日期转换格式化函数大全
    访问者模式
    享元模式
    中介者模式
    职责链模式
    命令模式
    桥接模式
  • 原文地址:https://www.cnblogs.com/baobaoa/p/9584254.html
Copyright © 2011-2022 走看看