Vue学习（二）

你那是什么调调

已于 2024-01-12 14:05:28 修改

阅读量203

点赞数

分类专栏： Vue学习文章标签： vue.js 学习 javascript

于 2022-11-21 12:04:11 首次发布

本文链接：https://blog.csdn.net/name_sakura/article/details/126288272

版权

Vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

9.计算属性：computed

计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。

可以使用 methods 来替代 computed，效果是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。使用 computed 性能会更好，但如果你不希望缓存，可以使用 methods 属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        {{ message }}
        <br>
        {{ reversedMessage }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: '12345'
            },
            computed: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        {{ message }}
        <br>
        {{ reversedMessage }}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '12345'
            },
            computed: {
                reversedMessage: {
                    get: function () {
                        return this.message.split('').reverse().join('')
                    },
                    set: function (newValue) {
                        this.message = newValue
                    }
                }

            }
        })
        vm.reversedMessage = 'http://www.runoob.com';
    </script>
</body>
</html>

10.监听属性：watch

使用 watch 实现计数器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p style="font-size: 25px">计算器: {{counter}} </p>
        <button @click="counter++" style="font-size:25px;">点我</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                counter: 1
            }
        })
        vm.$watch('counter', function (n, o) {
            alert('old ' + o + ' new ' + n);
        })
    </script>
</body>
</html>

进行千米与米之间的换算：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
    千米：<input type="text" v-model="km">
    米：<input type="text" v-model="m">
</div>
<script type = "text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            km: 1,
            m: 1000
        },
        watch: {
            'km': function (val) {
                this.km = val;
                this.m = val * 1000;
            },
            'm': function (val) {
                this.km = val / 1000;
                this.m = val;
            }
        }
    })
</script>
</body>
</html>

11.样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

11.1 绑定class

11.1.1 对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
     v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})
</script>
</body>
</html>

11.1.2 计算属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.base {
  width: 100px;
  height: 100px;
}

.active {
  background: green;
}

.text-danger {
  background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>

new Vue({
  el: '#app'
  },
  computed: {
    classObject: function () {
      return {
  		base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})
</script>
</body>
</html>

11.1.3 数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
	width: 100px;
	height: 100px;
	background: red;
}
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

11.1 绑定style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>

  	<div v-bind:style="styleObject">菜鸟教程</div>

	<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30,
	styleObject: {
      color: 'green',
      fontSize: '30px'
    },
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>
</body>
</html>

12.事件处理器

13.表单

13.1 文本框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
</style>
<body>
<div id="app">
    <input type="text" v-model="message1">
    <p>{{message1}}</p>

    <textarea v-model="message1"></textarea>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message1: ''
        }
    })
</script>
</body>
</html>

13.2 多选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
</style>
<body>
<div id="app">
    <label for="a1">a1</label>
    <input id="a1" type="checkbox" value="a1" v-model="message1">
    <label for="a2">a2</label>
    <input id="a2" type="checkbox" value="a2" v-model="message1">
    <label for="a3">a3</label>
    <input id="a3" type="checkbox" value="a3" v-model="message1">
    <p>{{message1}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message1: []
        }
    })
</script>
</body>
</html>