zoukankan      html  css  js  c++  java
  • 02-vue学习篇-以正确的姿势使用vue

    1.渲染数据

    #view层
    <div class="hello">
        <h1>{{ msg }}</h1>   //msg
    </div>
    
    #model层
    
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',    //msg变量
        }
      }
    }

    运行效果

    2.双向数据绑定

    #view层
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>{{ devops }}</h2>
        <input v-model="devops" />
      </div>
    
    #model层
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          devops: 'DevOps Young Young'
        }
      }
    }

      运行效果:会看到输入框中的内容跟devops内容一样,尝试更改输入框中的文本,devops也会跟着变化。

    3. v-for循环列表

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>{{ devops }}</h2>
        <input v-model="devops" />
        <ul>
          <li v-for="(student,index) in students" :key="index">
            <span>{{ student.name }}</span>
            <span>{{ student.age }}</span>
          </li>
        </ul>
      </div>
    </template>
    
    
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          devops: 'DevOps Young Young',
          students: [{'name': 'aa', 'age': 11}, {'name': 'bb', 'age': 20}]
        }
      }
    }
    </script>

    运行效果:

  • 相关阅读:
    Android Lint简介
    免费HTTP数据抓包Fiddler2[4.6.1.2]以及显示中文包内容的方法
    IE6、7下bug
    图表插件
    学习:使用svg
    jQuery Transit
    jQuery基础学习笔记(1)
    HTTP协议详解学习
    html5学习笔记
    html释疑
  • 原文地址:https://www.cnblogs.com/mascot1/p/10260922.html
Copyright © 2011-2022 走看看