zoukankan      html  css  js  c++  java
  • vue基础

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
    
      <div id="app">
        {{msg}}
        <button @click="handler">按钮</button>
        <br>
        <!-- 文字  字文-->
        {{msg2.split('').reverse().join('')}}
        <br>
        {{reverseMsg2}}
        <br>
        <ul>
          <li v-for="stu in stus">{{stu.name}}</li>
        </ul>
        <ul>
          <li v-for="boy in boys">{{boy.name}}</li>
        </ul>
      </div>
    
      <script src="./vue.js"></script>
      <script>
        // mvvm
        /* 
            Vue是数据响应式的
            只要data发生变化,页面上对应内容也会跟着改变
         */
        const app = new Vue({
          el: '#app',
          data: {
            msg: '数据',
            msg2: "Hello Vue!",
            stus: [
              {
                name: '张三',
                sex: ''
              }, {
                name: '李四',
                sex: ''
              }, {
                name: '王五',
                sex: ''
              }, {
                name: '赵六',
                sex: ''
              }
            ]
          },
          methods: {
            // 事件的函数
            handler () {
              console.log(1)
            },
            // 正常的函数
            init () {
              console.log('页面加载就会执行')
            }
          }, 
          computed: {
            // computed在模板中使用时和data一模一样
            // 1 当表达式过于复杂时
            reverseMsg2 () {
              return this.msg2.split('').reverse().join('')
            },
            // 2 想要根据data生成一些新的数据时
            boys () {
              /* const boysArr = []
              for (let i = 0; i < this.stus.length; i++) {
                if (this.stus[i].sex === '男') {
                  boysArr.push(this.stus[i])
                }
              }
              return boysArr */
              // filter
              /* 
                arr.filter生成的是一个新的数组
                
                arr = [1,2,3,4,5]
                arr.filter(num => num % 2 === 0)
               */
              return this.stus.filter(stu => stu.sex === '')
    
            }
          }, 
          created () {
            this.init()
          }
        })
      </script>
    </body>
    
    </html>
  • 相关阅读:
    vue(5)
    vue(4)
    vue(3)-防止闪烁
    vue(2)
    bootstrap 模态框
    2017年上半年工作总结和计划
    vue(1)
    文本框数量加减功能
    meta 控制移动端页面的缩放
    题解 P1550 【[USACO08OCT]打井Watering Hole】
  • 原文地址:https://www.cnblogs.com/bao2333/p/10151749.html
Copyright © 2011-2022 走看看