Vue学习之旅

最新推荐文章于 2022-09-21 22:12:10 发布

Code小V

最新推荐文章于 2022-09-21 22:12:10 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/pang_12150/article/details/107663713

版权

1.属性

HTML属性中的值应使用v-bind指令

以下实例判断use的值，如果为true使用class1类的样式，否则不使用该类

<style>
  .class1{
    background:#444;
    color:#eee;
  }
</style>
<body>
  <div id="app">
    <lable for="r1">修改颜色</lable>
    <input type="checkbox" v-model="use" id="r1">
    <br><br>
    
    <div v-bind:class="{'class1':use}">
      v-bind:class 指令
    </div>
  </div>
  <script>
  new Vue({
    el:'#app',
    data:{
      use:false
    }
  })
  </script>
</body>

2.表达式

Vue.js都提供了完全的JavaScript表达式支持

<body>
  <div id="app">
   {{5+5}}<br>
    {{ok ? 'YES':'NO'}}<br>
    {{message.split('').reverse().join('')}}
    
    <div v-bind:id="'list-'+id">
     菜鸟教程
    </div>
  </div>
  <script>
  new Vue({
    el:'#app',
    data:{
      ok:true,
      message:'RUNOOB',
      id:1
    }
  })
  </script>
</body>

3.指令

指令是带有v-前缀的特殊属性

指令用于在表达式的值改变时，将某些行为应用到DOM上

<body>
  <div id="app">
  
   <p v-if="seen">
     现在你看到我了
    </p>
  </div>
  <script>
  new Vue({
    el:'#app',
    data:{
      seen:true
    }
  })
  </script>
</body>

v-if指令将根据表达式seen的值（true或false）来决定是否插入p元素。

4.用户输入

在input输入框中我们可以使用v-model指令来实现双向数据绑定

<body>
  <div id="app">
  
   <p>
     {{message}}
    </p>
    <input v-model="message">
  </div>
  <script>
  new Vue({
    el:'#app',
    data:{
     message:'runoob'
    }
  })
  </script>
</body>

v-model指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件可以使用v-on监听事件，并对用户的输入进行响应

字符串反转

<body>
  <div id="app">
  
   <p>
     {{message}}
    </p>
   <button v-on:click="reverseMessage">
     反转字符串
    </button>
  </div>
  <script>
  new Vue({
    el:'#app',
    data:{
     message:'runoob'
    },
    methods:{
     reverseMessage:function(){
      this.message=this.message.split('').reverse().join('')
  }
  }
  })
  </script>
</body>

5.v-for指令

v-for指令需要以site in sites 形式的特殊语法，sites是源数据数组site是数组元素迭代的别名。

<body>
  <div id="app">
  <ol>
    <li v-for="site in sites">
    {{site.name}}
    </li>
    </ol>
  </div>
  <script>
  new Vue({
    el:'#app',
    data:{
     sites:[
       {name:'Runoob'},
       {name:'Google'},
       {name:'Taobao'}
     ]
    }
  })
  </script>
</body>