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

文章目录

  • 1. v-bind:属性名="value"
    • 1.1 value的取值
    • 1.2 v-bind: 可以简写成 :
    • 1.3 v-bind 为 style class 属性赋值
      • 默认情况下v-bind会去Vue对象中的data中去找对应数据,但是 style class 属性对应的数据一般在样式中,所以需要另外一种方式
      • 1.3.1 为class属性赋值
        • v-bind:class="['class属性名','class属性名']"
        • v-bind:class="['size',{'color':false},'active': true]"
      • 1.3.2 为 style属性赋值
  • 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表达式

<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>
  
  <script src="js/vue.js">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

你可能感兴趣的:(Vue,vue)