vue用法示例（三）

2024-04-27 03:34:03
开发
10

（1）V-on:click 函数 v-on : 可以简写成 @

<button v-on:click="reverseMessage">反转字符串</button>

<button @click="reverseMessage">反转字符串</button>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<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>
</html>

其实这个this并不是变量，也不用声明，因为它就是整个vue构造器的化身，你可以用this.变量名的方式，直接调用控制编辑这个vue构造器内的一切变量属性等。作用就相当于我们python类里面的 self

（2）过滤器filter

{{ message | filterA('arg1', 1+1) }} 带参数的过滤器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}  
</div>
        
<script>
new Vue({
  el: '#app',
  data: {
        message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

(3)Computer 计算

Computer methods就是用来存放各种js函数的那个vue构造器的属性之一。现在要学的这个computed和它几乎是一样的功能，一样的用法

methods 每次渲染刷新都会触发函数运行。

computed 则只会在检测到依赖的元素或变量发生变化时才会重新运行，其他时候都是使用缓存

computed 的特有默认属性 get子函数

computed: { site: { get: function () {return this.name + ' ' + this.url} } }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

原文地址:https://blog.csdn.net/daxiashangxian/article/details/138225773 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1783942634906193920.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

vue用法示例（三）

相关推荐

最近更新

热门阅读