VUE实例2

- 日理万妓 2022-12-20 01:59 160阅读 0赞

## VUE实例2 ##

<!DOCTYPE html>
    <html>
    <head>
        <title>Vue Demo</title>
        <script src="https://vuejs.org/js/vue.min.js"></script>
    </head>
    <body>
        <div id="firstVue">
    	    
            <input type="number" v-model.number="step" />
    		
            <button v-on:click="clickButton">Add</button>
    		
            <p>{
       {total}}</p>
    		
    		<input type="button" v-bind:disabled="show" value="奇偶切换">
        </div>
    </body>
    <script type="text/javascript">
        //新建vue对象
        var myVue = new Vue({
         
    	    //el是Vue的保留字，用来指定实例化的DOM的ID号
            el:'#firstVue',  //#是标签选择器，选择ID=“firstVue”的标签
            data:{
         //data参数绑定VUE实例的数据变量，不同变量逗号分隔
                step: 1,
                total: 0,
    			show: true
            },
            methods:{
         //函数定义
                clickButton:function(){
         
    			    //this引用vue实例里的局部变量
                    this.total += this.step
    				if(this.total%2==0){
         
    					this.show=true
    				}else{
         
    					this.show=false
    				}
                }
            }
        })
    	//new Vue({})新建vue实例
    	//v-bind:和{
         {}}双大括号语法在html中绑定变量
        //v-on: 和 @ 语法绑定函数到标签的事件
        //v-model: 语法使用户的页面输入反向传递回vue实例变量
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 2.vue.js实例的创建

挂载点、插值表达式 <! <html> <head> <metahttp-equiv="Content-Type"content="text/html;charse

客官°小女子只卖身不卖艺/ 2024年02月18日 21:08/ 0 赞/ 33 阅读

相关 VUE2快速入门(六)---实例property(重点)

实例 VUE2 数据data 父子传值props 获取元素refs 获取元素属性el 实例属性o

小咪咪/ 2022年12月25日 00:53/ 0 赞/ 114 阅读

相关 VUE实例2

VUE实例2 <!DOCTYPE html> <html> <head> <title>Vue Demo</title>

- 日理万妓/ 2022年12月20日 01:59/ 0 赞/ 161 阅读

相关 Vue.js（2）：应用与组件实例

一、创建一个应用实例每个 Vue 应用都是通过用 `createApp` 函数创建一个新的应用实例开始的： const app = Vue.c

布满荆棘的人生/ 2022年09月13日 12:29/ 0 赞/ 210 阅读

相关 Vue.js2.0_入门实例

最近，vue.js越来越火。在这样的大浪潮下，我也开始进入vue的学习行列中，在网上也搜了很多教程，按着教程来做，也总会出现这样那样的问题（坑啊，由于网上那些教程都是Vue.j

我就是我/ 2022年06月15日 07:42/ 0 赞/ 516 阅读

相关 Vue.js 学习(2) -- Vue实例

Vue.js都是通过new Vue…创建一个Vue的根实例来开始运行的，上一节我们已经看到了很多这样格式的栗子： var vm = new Vue({ /

淡淡的烟草味﹌/ 2022年06月15日 01:26/ 0 赞/ 208 阅读

相关 Vue.js2.0 入门实例（二）（小试牛刀）

前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具。这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性，以及一个小实例，通过实例来跟大家分享，想必更容易理解

Love The Way You Lie/ 2022年06月08日 04:56/ 0 赞/ 205 阅读

相关 Vue实例

每一个组件都是一个Vue的实例，Vue的实例上有很多属性和方法。控制台输入： vm vm.$data vm.$el vm.$destroy()

矫情吗；*/ 2022年04月22日 05:14/ 0 赞/ 273 阅读

相关 Vue实例

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

深藏阁楼爱情的钟/ 2021年09月20日 01:08/ 0 赞/ 459 阅读

相关 vue2路由实例（基本用法）

Vue-router 是给Vue.js 提供路由管理的插件，利用hash 的变化控制动态组件的切换。以往页面间跳转都由后端MVC 中Controll

落日映苍穹つ/ 2021年09月14日 15:10/ 0 赞/ 348 阅读