vue——# 指令 v-bind 动态绑定 # 指令v-model 双向数据绑定

最新推荐文章于 2024-08-08 11:39:30 发布

fuzuxian

最新推荐文章于 2024-08-08 11:39:30 发布

阅读量741

点赞数

分类专栏： vue 文章标签： vue v-bind 动态绑定前端

本文链接：https://blog.csdn.net/image_fzx/article/details/103810388

版权

vue 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

1， v-bind

1-1， v-bind基础使用

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style，以及href等。
简写为一个冒号：

<div id="app">
  <img  v-bind:src="imgUrl"  alt=""  />    // 从服务器中获取图片地址
  <a  :href="aRef">Cookie-fzx博客</a>     //   :   简写
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgUrl:'https://img14.360buyimg.com/n0/jfs/t1/106571/27/9321/157739/5e0d437aE154b7ada/f8f0923390b0fcb0.jpg',
      aRef: 'https://blog.csdn.net/image_fzx'
    }
  })

1-2， v-bind 动态绑定class（对象语法）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{color: blue }
    .line{}
  </style>
</head>
<body>
<div id="app">
  <!--{类名：布尔值，  类名：布尔值}-->
  <!--    <h2 class="fixClass"  v-bind:class="{active:isActive, line:isLine}" >  {{message}} </h2>      -->
  <!--使用方法-->
  <h2 class="fixClass"   v-bind:class="getClass()" >  {{message}} </h2>     

  <button v-on:click="btnClick">按钮</button>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive:true,
      isLine:true
    },
    methods:{
      btnClick: function () {
        this.isActive = ! this.isActive
      },
      getClass:function () {
        return {active:this.isActive, line:this.isLine}
      }
    }
  })
</script>
</body>
</html>

1-3， v-bind 动态绑定style（对象语法）

“ ------------- <h2 :style="{key1:value1, key2:value2}" -------- ”

<div id="app">
    <!--   <h2 :style="{key1:value1,   key2:value2}"   -->
    <!--    fontSize1为变量，不需要加引号         fontSize1 + 'px'——> "50px" 必须加引号        -->
  <h2 :style="{fontSize:fontSize1 + 'px' ,  backgroundColor:background1}">  {{message}} </h2>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fontSize1: 50,
      background1:'red'        // 'red'   需要加引号!!!
    }
  })
</script>

2， v-model 双向数据绑定

用于在表单上创建 双向数据绑定

2-1， v-model 结合 radio 类型使用

v-model

<div id="app">
  <!--// lable好处：用户点击文字也可以选中-->
  <label  for="male">   
    <input  type="radio"  id="male"   value="男"   v-model="sex" >男
  </label>
  <label  for="female">
    <input type="radio"  id="female"  value="女"    v-model="sex" >女
  </label>
  <h3>你选择的是：{{sex}} </h3>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      sex: "女"      // 默认值为女
    }
  })
</script>

2-2， v-model 结合 checkbox 类型使用

v-model

<div id="app">
  <label><input  type="checkbox"  value="炸酱面"   v-model="food">炸酱面</label>
  <label><input  type="checkbox"  value="重庆小面" v-model="food">重庆小面</label>
  <label><input  type="checkbox"  value="兰州拉面" v-model="food" >兰州拉面</label>
  <label><input  type="checkbox"  value="热干面"   v-model="food">热干面</label>
  <h2> cookie爱吃的食物是 {{food}} </h2>
</div>

<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      food: [],
    }
  })
</script>

2-3， v-model 结合 select 类型使用

v-model

2-4， v-model修饰符

（1） .lazy
默认“同步“”输入框中的内容，加了lazy修饰符后，在失去焦点或者回车之后才更新内容。

<input   type="text"   v-model.lazy="msg">
<h2>{{msg}}</h2>

（2） .number
默认任何都当做字符串处理，加了number修饰符后，当做数字处理

<input  type="text"   v-model.number="age">
<h2>{{age}}  -- {{typeof age}}</h2>

（3）.trim
自动过滤用户输入的首尾空格

<input    type="text"   v-model.trim="name">
<h2>{{name}}</h2>

2-5， v-model 的本质

1， v-bind绑定一个value属性》 v-bind:value="message"
2， v-on指令给当前元素绑定input事件》 v-on:input="message=$event.target.value

<input type="text"  v-model="message">
<!--等同于-->
<input type="text"   v-bind:value="message"   v-on:input="message=$event.target.value">

fuzuxian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录