Vue之数据绑定

简介: vue的简单的数据绑定操作

在我们Vue当中有两种数据绑定的方法
1.单向绑定
2.双向绑定

让我为大家介绍一下吧!

1、单向绑定(v-bind)

数据只能从data流向页面
举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root">
        单向绑定:<input type="text" v-bind:value="name">
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    Vue.config.productionTip = false //阻止生产提示
    const vm = new Vue({
    
    
        el:"#root",
        data:{
    
    
            name:"张三"
        }
    })
</script>
</html>

image.png

2.双向绑定(v-model)

数据不仅能从data流向页面,还可以从页面流向data
注意:双向绑定一般都应用在表单类元素上(如:input、select等),.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。

我们来用用双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root">
        单向绑定:<input type="text" v-bind:value="name"><br><br>
        双向绑定:<input type="text" v-model:value="name">
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    Vue.config.productionTip = false //阻止生产提示
    const vm = new Vue({
    
    
        el:"#root",
        data:{
    
    
            name:"张三"
        }
    })
</script>
</html>

image.png

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关文章
|
6天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
6天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
6天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
6天前
|
移动开发 JavaScript 前端开发
Vue Router的介绍与引入
Vue Router的介绍与引入
|
6天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
6天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
|
6天前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
6天前
|
JavaScript API
vue 模板引用
vue 模板引用
|
6天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
7天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院