Vue学习

一、模板语法(v-html)

(在app.vue里面添加)

<template>
    <h3>模板语法</h3>
    <p>{{ msg }}</p>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? "yes" : "no" }}</p>
    <p v-html="Baidu"></p>
</template>

<script>
export default {
    data() {
        return {
            msg: "文本",
            number: 0,
            ok: true,
            Baidu:"<a href='https://baidu.com'> 百度"
        };
    },
};
</script>

二、动态绑定(v-bind）

（v-bind:  可以简写成" : ",如果是成员绑定，使用" v-bind=" 名字 " "格式）

<template>
  <div v-bind:class="msg">test0</div>
  <button :disabled="isButtonDisable">Button</button>
  <div v-bind="objectOfAttrs">test1</div>
</template>
<script>
export default {
  data() {
    return {
      msg: "active",
      isButtonDisable: false,
      objectOfAttrs: {
        id: "appid",
        class: "appclass",
      },
    };
  },
};
</script>

三、条件渲染（v-if、v-else、v-else-if、v-show）

"v-show" 单条件渲染

<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看见我吗</div>
  <div v-else>还是看看我吧</div>

  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else-if="type === 'C'">C</div>
  <div v-else>NOT A/B/C</div>

  <div v-show="flag">看见我test2</div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
      type: "D",
    };
  },
};
</script>

​

四、列表渲染