vue2笔记（二）

最新推荐文章于 2024-10-18 17:49:11 发布

萝卜北l

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量75

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/luobobei/article/details/120378551

版权

本文深入探讨Vue2中的核心概念，包括v-bind的使用，如动态绑定属性、class和style；事件绑定v-on及简写方式；v-model的原理与多种场景应用；分支结构v-if/v-else/v-else-if/v-show的差异；循环遍历的注意事项；以及数组常用方法。此外，还讲解了计算属性computed和过滤器filters，并通过购物车案例展示实际应用。

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

v-bind

v-bind控制标签属性

v-bind指令,让普通的标签属性的值为 data中的属性名
v-bind指令简写为冒号

<div id="app">
       <!-- v-bind指令,让普通的标签属性的值为 data中的属性名
		 v-bind指令简写为: -->
    <a v-bind:href="url1">百度一下</a>
	<a :href="url2">淘宝一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
     
      el: "#app",
      data: {
     
        url1: "http://www.baidu.com",
        url2: "http://www.taobao.com"
      }
    })
</script>

v-bind动态绑定class（对象）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .active {
     
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--<h2 class="active">{
   {message}}</h2>-->
  <!--<h2 :class="active">{
   {message}}</h2>-->

  <!--<h2 v-bind:class="{key1: value1, key2: value2}">{
   {message}}</h2>-->
  <!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{
   {message}}</h2>-->
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{
  {message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{
  {message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

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

</body>
</html>

v-bind动态绑定class（数组）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 class="title" :class="[active, line]">{
  {message}}</h2>
  <h2 class="title" :class="getClasses()">{
  {message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      message: '你好啊',
      active: 'aaaaaa',
      line: 'bbbbbbb'
    },
    methods: {
     
      getClasses: function () {
     
        return [this.active, this.line]
      }
    }
  })
</script>

</body>
</html>

v-bind动态绑定style（对象）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .title {
     
      font-size: 50px;
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--<h2 :style="{key(属性名): value(属性值)}">{
   {message}}</h2>-->

  <!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
  <!--<h2 :style="{fontSize: '50px'}">{
   {message}}</h2>-->

  <!--finalSize当成一个变量使用-->
  <!--<h2 :style="{fontSize: finalSize}">{
   {message}}</h2>-->
  <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{
  {message}}</h2>
  <h2 :style="getStyles()">{
  {message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    },
    methods: {
     
      getStyles: function () {
     
        return {
     fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })
</script>

</body>
</html>

v-bind动态绑定style（对象）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{
  {message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      message: '你好啊',
      baseStyle: {
     backgroundColor: 'red'},
      baseStyle1: {
     fontSize: '100px'},
    }
  })
</script>

</body>
</html>

事件绑定v-on

事件绑定

v-on 指令用法

<input type="button" v-on:click='num++'>

简写

<input type="button" @click='num++'>

在Vue中，方法定义在 vue的实例对象中，和data同一级，值是一个对象

事件函数的调用方式：

<button v-on:click='handle

最低0.47元/天解锁文章

萝卜北l

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录