前端基础-vue（双向绑定）

最新推荐文章于 2024-05-13 18:02:56 发布

SmallRed-zhb

最新推荐文章于 2024-05-13 18:02:56 发布

阅读量328

点赞数

分类专栏： IT 前端文章标签： vue 前端框架前端 vue双向绑定 web前端vue

本文链接：https://blog.csdn.net/qq_41442781/article/details/89676869

版权

IT 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

前端

35 篇文章 0 订阅

订阅专栏

html部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue双向绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="../css/vue-2.css"/>
</head>

<body>
<div class="app">
<button v-on:click="jiayi">点击加1</button>
<button @click="jianyi">点击减1</button>
<p>{{count}}</p>
<p>{{count>5?"大于5":"小于或等于5"}}</p>
<p>知识点1：双向帮定</p>
单向绑定：
<input type="text" v-bind:value="value" v-on:input="input"/>

<p>{{value}}</p>
双向绑定：
<input type="text" v-model="value"/>
<p>{{value}}</p>
</div>
<script src="../js/vue-2.js"></script>
</body>
</html>

js部分

// JavaScript Document
new Vue({
   el:'.app',
   data:{
       count:0,
       value:"zhb",
   },
   methods:{
       jiayi:function(){
           this.count++;
       },
       jianyi:function(){
           this.count--;
       },
       input:function(e){//声明一个函数让输入框每次输入时都执行这个函数，双向绑定时就不需要这个函数
           this.value=e.target.value;
       }
   },
})