vue 起步_code

Posted 童彪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于vue 起步_code的主要内容,如果未能解决你的问题,请参考以下文章

vue配合iview/element等ui实现界面效果起步

VS Code一键创建Vue代码模板

如何在 Vs Code 中更改默认自动选择的用户片段行为

vs-code 配置

vue项目起步准备

vue3项目起步之代码规范,element-plus axios集成