vue 初学使用

最新推荐文章于 2024-03-14 15:23:45 发布

打小我就狂

最新推荐文章于 2024-03-14 15:23:45 发布

阅读量90

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qq_42095701/article/details/114001177

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

安装下载:

https://cn.vuejs.org/

获取数据的ID:

template(里面存放模块html文本):

数据展示:

data(只能是单数据不能出现函数):

计算属性(使用函数传输) computed:

注意:

methods参数(函数-一般用来处理事件传参,调用):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue实现</title>
  <script src="./js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>表单操作</h3>
    <input type="text" name="username" v-model="username">
    <input type="button" value="提交" @click="submit">
    <p>{{ uname }}</p>

    <h3>动态列表</h3>
    <input type="button" value="加载" @click="load">
    <ul>
      <li v-for="item in dataList">{{ item }}</li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        username: 'admin',
        dataList: []
      },
      computed: {
        uname () {
          return this.username[0] + "***"
        } 
      },
      methods: {
        submit() {
          console.log('获取表单的值:', this.username)
          this.load()
        },
        load() {
          this.dataList = ['北京', '上海', '广州', '深圳']
        }
      }
    })
  </script>
</body>
</html>

打小我就狂

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 初学使用

安装下载:https://cn.vuejs.org/目录:数据展示: data(只能是单数据不能出现函数):计算属性(使用函数传输) computed:注意:methods参数(函数-一般用来处理事件传参,调用):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...
复制链接

扫一扫

专栏目录