day02 CMS前端开发-vue-v-on

最新推荐文章于 2024-08-17 08:58:12 发布

feng_fly_28

最新推荐文章于 2024-08-17 08:58:12 发布

阅读量66

点赞数

分类专栏： day02 CMS前端开发文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/minihuabei/article/details/112826366

版权

day02 CMS前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

创建vue_02.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <a v-bind:href="url">
    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
   <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
    <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            name:'云和程序员',
            num1:2,
            num2:3,
            result:5,
            url:'http://www.yunhe.cn',
            size:11
        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
                //alert("计算结果："+this.result)
            }
        }
    });
</script>
</html>

this.result中的this直VM ，this.result指获取VM中的data中的result属性。这样计算结果，给了data的result属性，这样里的值也跟着改变

feng_fly_28

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day02 CMS前端开发-vue-v-on

创建vue_02.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js常用指令的测试</title></head><body><div id="app"> <!--相当于MVVM的view
复制链接

扫一扫

专栏目录