9. vue常用指令 v-bind 给属性绑定值

最新推荐文章于 2024-12-01 17:49:11 发布

神奇洋葱头

最新推荐文章于 2024-12-01 17:49:11 发布

阅读量2.2k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq28129019/article/details/118415648

版权

本文详细介绍了Vue中的v-bind指令，包括其简写形式，如何为属性、style和class赋值。特别强调了v-bind在处理class和style属性时的特殊用法，如动态绑定多个class和style。同时，对比了v-bind与v-model的区别，指出v-model仅适用于特定表单元素。

摘要由CSDN通过智能技术生成

文章目录

1. v-bind:属性名="value"
2. v-model 和 v-bind
- 2.1 v-model只能给 \ \ \元素绑定属性值
- 2.2 v-bind 可以给任何元素绑定属性值
3.官方示例

1. v-bind:属性名=“value”

1.1 value的取值

1.1.1 可以是Vue对象中data中的属性名key
1.1.2 可以是合法的js表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue的基本使用</title>
  <!--步骤1 引入vue.js-->
  <script src="js/vue.js"></script>
  <!--也可以使用在线引用-->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
</head>
<body>
  <div id="app">
    <ul>
      <li>名字: {
  {name}}</li>
      <li>年龄: {
  {age}}</li>
      <input type="text" v-bind:value="value"/>
      <br/>
      <input type="text" :value="value"/>
      <input type="text" :value="num + 1"/>
    </ul>
  </div>
  
  <script>
    //步骤2 创建vue实例对象
    let vue = new Vue({