Vue.js02之常用标签v-model及计算器案例

最新推荐文章于 2024-04-18 14:45:54 发布

autumn-leaf

最新推荐文章于 2024-04-18 14:45:54 发布

阅读量811

点赞数 2

分类专栏： Vue.js Vue.js 文章标签： v-model style样式 class样式

本文链接：https://blog.csdn.net/chenpeixing361/article/details/88853182

版权

本次我们继续讲解Vue.js的常用指令，并且我们会用所学的知识来写一个计算器的小案例帮助大家巩固新的知识。

首先我们先来一段新的代码，代码如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <h3>{
  { msg }}</h3>
        <!-- v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现双向绑定 -->
        <input type="text" :value="msg" style="width: 40%;">
        <!-- v-model可以运用在表单元素中 -->
        <!-- input(radio,text,address,email...) select checkbox textarea -->
        <input type="text" v-model="msg" style="width: 40%;">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello,Vue.js!'
            }
        })
    </script>
</body>
</html>

不熟悉v-bind指令的,可以查看我的上一篇博客，链接为https://blog.csdn.net/chenpeixing361/article/details/88829007。大家看了上面一段简单的代码，应该会发现只有v-model指令没有讲过，那么v-model具体用法是什么呢?该指令在表单<input>、<radio>、<select>、<checkbox>等元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。而与v-bind最大的不同之处便是v-bind只能实现单向绑定，只能实现从M自动绑定到V，而v-model可以实现双向绑定。

接下来活学活用，我们用v-model指令做一个简易的计算器，首先代码如下：

最低0.47元/天解锁文章

autumn-leaf

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue.js02之常用标签v-model及计算器案例

本次我们继续讲解Vue.js的常用指令，并且我们会用所学的知识来写一个计算器的小案例帮助大家巩固新的知识。首先我们先来一段新的代码，代码如下：<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"&...
复制链接

扫一扫

专栏目录