vue 日期格式化_vue起步篇3常用选项，从0基础开始到全家桶

最新推荐文章于 2024-07-14 22:44:48 发布

weixin_39632471

最新推荐文章于 2024-07-14 22:44:48 发布

阅读量961

点赞数

文章标签： vue 日期格式化

点击上方“蓝字”关注我们常用选项

vue有许多配置选项，这节之类出常用的一些选项

1、computed

计算属性：主要是对原数据进行改造输出。改造输出：包括格式化数据(价格，日期)，大小写转换，排序，添加符号

computed: {
    newPrice () {
        return '￥' + this.price + '元';
    }}

1 2 3 4 5

2、methods

方法属性：用于绑定html中的事件对应的方法

methods:{
    add (num) {
        this.count += num;
    }}

1 2 3 4 5

3、watch

数据变化监听器：主要用于监测data中的数据变化, 定义使用时，需要与data中的变量同名

watch: {
    question(val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal);
    }}

1 2 3 4 5

4、filters [vue3.0弃用]

过滤器：通常格式化字符，使用传值

filters: {
    filterA(value) {
        return value.toUpperCase();
    }}

1 2 3 4

5、mixins

混入：用于减少代码污染、减少代码量、实现代码重用

// 额外临时加入时，用于显示日志var addLog={
    updated:function(){
        console.log("数据放生变化,变化成"+this.count+".");
    }}// 实例化vuevar app = new Vue({
    // 挂载实例
    el:'#app',
    // 页面数据初始化，字符，对象、数组
    data:{
        count: 100
    },
    // 混入
    mixins: [addLog]})

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

6、extends

扩展：对构造器进行扩展

// 扩展var extendObj ={
    created: function(){
        console.log("我是被扩展出来的");
    }}// 实例化vuevar app = new Vue({
    // 挂载实例
    el:'#app',
    // 页面数据初始化，字符，对象、数组
    data:{
    },
    // 扩展
    extends: extendObj})

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

完整的代码示例

DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Vue入门之Helloworldtitle><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>head><body><div id="app">
        {{message}}        <div>价格：{{newPrice}}div><div>数字：{{count}}div><div><button @click="add(2)">addbutton>div><div><input v-model="question">div><div>过滤：{{filtera | filterA}}div>div><script type="text/javascript">// 额外临时加入时，用于显示日志var addLog={updated:function(){
        console.log("数据放生变化,变化成"+this.count+".");}}// 扩展var extendObj ={created: function(){
        console.log("我是被扩展出来的");}}// 实例化vuevar app = new Vue({// 挂载实例
    el:'#app',// 页面数据初始化，字符，对象、数组
    data:{
        message: 'hello Vue!',
        price: 100,
        count: 100,
        question: '',
        filtera: 'abc'},// 计算属性：主要是对原数据进行改造输出。// 改造输出：包括格式化数据(价格，日期)，大小写转换，排序，添加符号
    computed: {newPrice () {return '￥' + this.price + '元';}},// 方法声明：用于绑定html中的方法
    methods:{add (num) {this.count += num;}},// data属性监听器, 作用v-model
    watch: {question(val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal);}},// 过滤器，通常格式化字符，使用传值
    filters: {filterA(value) {return value.toUpperCase();}},// 混入，作用：减少代码污染、减少代码量、实现代码重用
    mixins: [addLog],// 扩展extends: extendObj})script>body>html>

↓↓↓ 三连一下，天天好心情！

weixin_39632471

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 日期格式化_vue起步篇3常用选项，从0基础开始到全家桶

点击上方“蓝字”关注我们常用选项vue有许多配置选项，这节之类出常用的一些选项1、computed计算属性：主要是对原数据进行改造输出。改造输出：包括格式化数据(价格，日期)，大小写转换，排序，添加符号computed: { newPrice () { return '￥' + this.price + '元'; }}123452、methods方法属性：用于绑...
复制链接

扫一扫