zoukankan      html  css  js  c++  java
  • vue 起步_code

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <div>{{data1}}</div>
        <ul>
          <li v-for="(item, index) in list">
            {{item.name}} - {{item.price}} - {{index}}
          </li>
        </ul>
    <!--     <p v-text="hello"></p>
        <p v-html="hello"></p>
        {{ num + 1}}
    
        <ul>
          <li v-for="item in list" v-text="item.name + '-' + item.price">
          </li>
        </ul>
        <ul>
          <li v-for="(item, index) in objList">
            {{index + ":" + item}}
          </li>
        </ul> -->
        <!-- <componentA v-for="(item, key) in objList" >
        </componentA>  -->
        <button v-on:click="addItem">addItem</button>
        <a v-bind:href="linlk" :title="linlk">to baidu</a>
        <a class="ccc" v-bind:class = "classStr"> to calss</a>
        <a class="ccc" v-bind:class = "[classRed,{'blue':blueSwitch}]"> 控制class</a>
        <button v-on:click="clickBlue">clickBlue</button>
        <p v-if="blueSwitch">isPartA</p>
        <p v-show="blueSwitch">isPartB</p>
    
      </div>
    </template>
    <script>
    import Vue from 'vue'
    //引入组件
    import componentA from './a'
    export default {
      components:{
        componentA:componentA
      },
      name: 'HelloWorld',
      data() {
        return {
          msg: ' helloWord ',
          hello: '<span> word</span>',
          num: 1,
          data1:'data1',
          list: [{
              name: 'apple',
              price: 64
            },
            {
              name: 'banana',
              price: 25
            }
          ],
          objList:{
            name:'tong',
            possword:'123456465',
            id:'vasd',
            group:'01'
          },
          linlk:'http://www.baidu.com',
          classStr:['classStr','classStr1'],
          classRed:['classRed'],
          blueSwitch:true,
        }
      },  
      methods:{//事件
        addItem (){
          this.list.push({
            name :'pinaapple',
            price:2564
          });
          console.log(this.list);
          Vue.set(this.list,1,{
            name :'changeAapple',
            price:111
          });
    
        },
        clickBlue (){
          if(this.blueSwitch == false){
              this.blueSwitch = true;
              return false;
          }
          if(this.blueSwitch == true){
              this.blueSwitch = false;
              return false;
          }
        }
      }
    }
    
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1,
    h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      /* display: inline-block; */
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    .blue {
      color: blue;
    }
    </style>
    https://www.tongbiao.xyz/
  • 相关阅读:
    Java实现 LeetCode 400 第N个数字
    Java实现 LeetCode 400 第N个数字
    Java实现 LeetCode 399 除法求值
    Java实现 LeetCode 399 除法求值
    Java实现 LeetCode 399 除法求值
    Java实现 LeetCode 398 随机数索引
    Java实现 LeetCode 398 随机数索引
    Java实现 LeetCode 398 随机数索引
    linux中的cd ..和cd -命令有什么区别?
    GCC使用
  • 原文地址:https://www.cnblogs.com/tongbiao/p/7747638.html
Copyright © 2011-2022 走看看