`
arpenker
  • 浏览: 357457 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

vue调用自定义函数，并且修改其值。

    博客分类：
  • vue
vue 
阅读更多
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ seen }}</p>
    <button v-on:click="hello">调用修改自己</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: false
  },
  methods: {
    hello: function () {
      this.seen = true
    }
  }
})
</script>
</body>
</html>

撸一下。

1.引入

2.定义一个初始化变量seen为false.

3.再定义一个自定义函数，将这个值变为true
这里要使用this.seen才能赋值。

4.然后在页面用v-on:click调用这个自定义函数。
分享到：
| vue对一个json进行取值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Vue表单验证插件Vue Validator使用方法详解

    - `modified`、`pristine`：字段值是否已修改或保持原始状态。 - `dirty`、`pristine`：字段值是否已更改过或未被更改。 - 对于每个字段，还会有如`required`、`maxlength`等具体验证规则的结果。 验证器语法： `v-...

    vue ready事件处理函数使用方法

    在早期版本的Vue（v1.x）中，`ready`事件处理函数是一个重要的生命周期钩子，它会在组件挂载完成后被调用，即当组件实例的`el`选项绑定的DOM元素被插入到文档中时。然而，在Vue的最新版本（v2.x及以上）中，`ready`...

    【JavaScript源代码】web面试vue自定义组件及调用方式.docx

    3. 在`install`函数内部，使用`Vue.extend()`方法创建一个新的组件构造器，基于`mymodel`组件对象。 4. 创建一个新的组件实例，并设置其属性，例如设置`show`为`true`以显示组件。 5. 使用`$mount()`方法使组件挂载...

    在vue3中配置ByteMD掘金同款markdown编辑器

    现在，当用户在编辑器中输入或修改 Markdown 文本时，`handleContentChange` 方法会被调用，你可以获取到新的内容并进行保存操作。如果需要将已有 Markdown 内容加载到编辑器，可以利用 `setContent` 方法： ```...

    富文本编辑器vue2-editor实现全屏功能

    handle方法则是用来切换编辑器的全屏状态，它通过修改编辑器容器的类名来控制全屏的显示和隐藏，并且调用了no-scroll库来阻止页面滚动。 接下来，我们需要在编辑器的配置选项中加入我们的自定义全屏模块。这一步骤...

    有关uni 和 vue 接口封装函数

    接口封装函数是提升代码复用性、可维护性和统一接口调用规范的重要手段。本文将详细探讨在Vue.js和UniApp中如何进行接口封装。 首先，我们来看Vue.js中的接口封装。在Vue.js项目中，通常我们会创建一个名为`api.js`...

    vee-validate vue 2.0自定义表单验证的实例

    本文介绍的知识点包括vee-validate的安装方法、使用中文提示、如何修改默认错误提示信息以及如何创建和使用自定义的验证规则。通过这些知识点的学习，开发者能够更高效地在vue 2.0项目中实现表单验证功能。

    vue实现中部导航栏布局功能

    在Vue的`mounted`钩子函数中，添加滚动事件监听器，当页面滚动时调用`handleScroll`方法。在`handleScroll`方法中，通过检查滚动位置`scrollTop`来判断当前页面滚动的位置。如果`scrollTop`大于300，说明用户已经...

    Vue 自定义指令功能完整实例

    Vue文档中提供了自定义指令的五个钩子函数，分别是： 1. bind：只调用一次，指令第一次绑定到元素时调用。在这一步中，开发者可以进行一次性的初始化设置。 2. inserted：被绑定元素插入父节点时调用（父节点存在...

    vue3.0-vite-antd 实现动态切换主题.zip

    3. **切换主题**：在需要切换主题的地方，比如设置页或顶部导航栏，你可以添加一个事件监听器，当用户选择不同的主题时，调用`setTheme`方法改变当前的主题。 4. **动态更新**：由于Vite的特性，你可以使用`import....

    vue2以及vue3 chrome调试工具

    4. **Vue实例**：展示Vue实例的完整信息，包括它的属性、方法、监听器等。 5. **Vuex集成**：对于使用Vuex管理状态的应用，Devtools提供了一个专门的面板来查看store的状态、mutations和actions。 Vue 3 Devtools：...

    vue原理和简易实现.docx

    Vue.js 是一款流行的前端JavaScript框架，其核心设计思想是MVVM（Model-View-ViewModel），实现了数据和视图的双向绑定。在这个简化的MVVM实现中...理解这些原理对于深入学习Vue.js以及开发自定义解决方案非常有帮助。

    【JavaScript源代码】vue 封装导出Excel数据的公共函数的方法.docx

    ### JavaScript 源代码分析：Vue 封装导出 Excel 数据的公共函数 #### 核心知识点概述 本文档详细介绍了如何在 Vue 项目中利用 Element UI 组件库封装一个导出 Excel 数据的公共函数。该函数通过 Vuex 的 store ...

    vue2.x基础笔记（大部分）

    Vue 实例的创建是通过调用 `Vue` 构造函数来完成的。当在项目中引入 Vue.js 文件后，即可使用 `Vue` 构造函数创建 Vue 实例。例如： ```javascript var app = new Vue({ el: '#app', data: { msg: "欢迎学习Vue",...

    Vue中正确使用jQuery的方法

    在Vue.js应用中使用jQuery可能并不总是最佳实践，因为Vue.js提供了一套强大的响应式数据绑定和组件化机制，这与jQuery的直接DOM操作方式有所不同。然而，有时出于历史原因或者特定需求，开发者可能需要在Vue项目中...

    Vue 自定义标签的src属性不能使用相对路径的解决

    通过上述配置，vue-loader将自动处理v-img标签的src属性，将其转换为require()函数调用，从而正确加载资源。同理，如果你有其他自定义标签需要加载资源，也可以在transformAssetUrls中添加相应的配置。 此外，Vue ...

    vue面试题 VUE面试题集

    Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，方便在 Vue.js 应用中使用路由功能。VueRouter 支持基于 HTML5 History API 的单页应用（SPA）以及传统的多页应用程序（MPA），使用它可以实现...

    vuedevtools.zip

    - "Console"面板提供了一种直接与Vue实例交互的方式，可以调用组件的方法、修改属性值等，便于测试和调试。 5. **性能分析** - "Performance"面板允许开发者记录和分析Vue组件的渲染性能，找出可能的瓶颈，优化...

    Vue自定义指令上报Google Analytics事件统计的方法

    这个自定义指令会在元素绑定时添加事件监听器，当用户点击时，它会使用`binding.value`（即`v-ga`指令的参数）调用`send`方法来上报统计事件。当元素解绑时，监听器会被移除，确保资源的正确释放。 最后，在Vue应用...

    Vue 3.0双向绑定原理的实现方法

    Proxy 提供了一种机制，允许开发者创建一个对象的代理，这个代理可以拦截并定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。因此，Proxy 代理不仅可以代理对象，还可以代理数组，甚至代理一些内部...

Magicbox
Global site tag (gtag.js) - Google Analytics