This is the fourth day of my participation in the August Text Challenge.More challenges in August

The interpolation

“{{}}” is basic text interpolation when defining templates with VUE, and it automatically displays our data in real time. For example, in the example in the previous section, the number of clicks: {{count}} the count here is the count bound to data. When the button is clicked to change the count, the interface will also change accordingly.

<template>
    <div class="container">The initial value is: {{initCount}} Number of clicks: {{count}}<button @click="clickBtn">button</button>
    </div>
</template>

<script>
export default {
    props: ['initCount'].data() {
        return {
            count: 0}},methods: {
        clickBtn() {
            this.count++; }}}</script>

<style scoped>
button {
    color: red;
    border: 1px solid # 909090;
}
</style>
Copy the code

Multiple interpolation methods

“{{}}” : {{}} “: {{}}” : {{}} “: {{}}” : {{}} “: {{}}” : {{}} “: {{}}

<template>
    <div class="container">
        <div>Number of clicks: {{count}}</div>
        <div>Click no more than 3 times: {{count > 3? 3 : count }}</div>
        <div>{{getCount()}}</div>
        <button @click="clickBtn">button</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0}},methods: {
        clickBtn() {
            this.count++;
        },
        getCount() {
            return this.count < 3 ? 3 : this.count; }}}</script>
Copy the code

Filter (Vue2.0)

Filters have been removed in Vue3.0, so just a brief overview.

When interpolating, it is sometimes necessary to format the inserted values, such as changing letters to uppercase, using commas for thousands of currency, and so on. At this time, it is necessary to use the filter function. Vue support in “{{}}” interpolation to add to the end of a pipe, “|” to filter data. Filters can be connected in series and can accept parameters. Such as:

/ / in series
{{message | filterA | filterB}}
Copy the code
Arg1 and arg2 are passed to the second and third arguments of the filter respectively. The first argument is the data itself.
{{message | filterA('arg1'.'arg2')}}
Copy the code
Pay attention to

Filters are suitable for simple transformations, but if you want to implement complex data transformations, you should apply computed attributes (computed). In VUe3, filters are abandoned entirely in favor of computed properties or methods.

I would be honored if this article could be of any help to you. It would be a great honor if the article was liked by you.

Personal wechat: iotzzh Public Number: front-end Wechat personal website: www.iotzzh.com Github Address: github.com/956159241/T…