Vue过滤器与内置指令和自定义指令及组件使用详解

时间:2022-12-12 糖^O^ 人气:0

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

过滤器可以用在两个地方：双花括号插值或 v-bind表达式。

局部过滤器

局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  filters: {
    filter_addbfh(value) {
      return value + '%';
    }
  }
};
</script>

全局过滤器

通过全局方式创建的过滤器，在任何一个vue实例中都可以使用

注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例

显示的内容,是由过滤器的返回值决定

使用语法: <h1>{{name | myfilter1}}</h1>

Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})

示例（过滤器）：

<div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- 计算属性实现 -->
    <h3>现在是：{{ fmtTime }}</h3>
    <!-- methods实现 -->
    <h3>现在是：{{ getFmtTime() }}</h3>
    <!-- 过滤器实现 -->
    <h3>现在是：{{time | timeFormater}}</h3>
    <!-- 过滤器实现（传参） -->
    <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    <h3 :x="msg | mySlice">尚硅谷</h3>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })
    new Vue({
        el:'#root',
        data:{
            time:1621561377603, //时间戳
            msg:'你好，尚硅谷'
        },
        computed: {
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        //局部过滤器
        filters:{
            timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }
    })
</script>

内置指令

v-text指令

用处：向其所在的节点中渲染文本内容。

与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<div id="root">
    <div>你好，{{name}}</div>
    <div v-text="name"></div>
    <div v-text="str"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            name:'小溪',
            str:'<h3>你好啊！</h3>'
        }
    })
</script>

v-html指令

(使用的很少)

作用：向指定节点中渲染包含html结构的内容。

加载全部内容