VUE实例2

- 日理万妓 2022-12-20 01:59 143阅读 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 条评论，143人围观）

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

相关阅读

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

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

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

相关 VUE实例2

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

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

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

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

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

相关 Vue 实例

[创建一个 Vue 实例][Vue] 每个 Vue 应用都是通过用 `Vue` 函数创建一个新的 Vue 实例开始的： var vm = new Vue({

r囧r小猫/ 2022年09月13日 04:16/ 0 赞/ 191 阅读

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

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

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

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

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

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

相关 Vue实例

每一个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的： var app = new Vue({ el: 'app'

小咪咪/ 2022年05月22日 11:41/ 0 赞/ 229 阅读

相关 Vue实例

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

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

相关 Vue实例

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

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

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

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

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