v-bind的简单使用

最新推荐文章于 2023-04-19 14:48:54 发布

篆愁君的烦恼

最新推荐文章于 2023-04-19 14:48:54 发布

阅读量426

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_52228992/article/details/124135676

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

v-bind:单向数据绑定，只能由后台修改，在页面上进行修改无法改变代码内容，一般由data中的数值进行绑定。

存在两种写法：

第一种， v-bind：属性=‘属性值’ ；

第二种，进行缩写，：属性=‘属性值’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.js" type="text/javascript"></script>
<div id="app">
  <input type="text" v-bind:value='msg'>
  <br>
  <input type="text" :value='msg'>
</div>
<script>
  var MyVue=new Vue({
    el:"#app",
    data:{
      msg:"message",
      val:"value"
    }
  });
</script>
</body>
</html>

运行结果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

篆愁君的烦恼

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
v-bind的简单使用

v-bind:单向数据绑定，只能由后台修改，在页面上进行修改无法改变代码内容，一般由data中的数值进行绑定。存在两种写法：第一种，v-bind：属性=‘属性值’ ；第二种，进行缩写，：属性=‘属性值’<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title...
复制链接

扫一扫