vue语法概要二

函数	用途	类别
v-html	用于输出html格式的数据	输出
v-bing	用于输出值	输出
v-model	双向绑定	输入和输出
v-if	逻辑判断	分支语句
v-else	同上	分支语句
v-if-else	同上	分支语句
v-for	遍历数据	循环语句

v-html用例：

<template>
  <div >
    <h1>{{ msg }}</h1>
    <div v-html="msg1"></div>
<br>
<br>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg1:'<h1>aaaa</h1>'
    }
  }
}
</script>

v-bing用例：

<template>
  <div >
    <label for="r1">update color</label>
    <input type="checkbox" v-mode="use" id="r1">
<br>
<div v-bind:class="{'class1':use}">v-bingd:class指令</div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      use:false
    }
  }
}
</script>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>

v-model：来实现双向数据绑定:

<template>
  <div>
    <input type="text" v-model="todo" />
    <button @click="addtod()">Add</button>
    <hr />未完成事项
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" />
        --{{item.title}}
        <button @click="delData(key)">shanchu</button>
      </li>
      <hr />已完成事项
    </ul>
    <ul>
      <li v-for="(item,key) in list " v-if="item.checked">
        <input type="checkbox" v-model="item.checked" />
        {{item.title}}
        <button @click="delData(key)">shanchu</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      todo: ""
    };
  },
  methods: {
    addtod() {
      this.list.push({
        title: this.todo,
        checked: false
      });
      this.todo = "";
    },
    delData(key) {
      this.list.splice(key, 1);
    }
  }
};
</script>

逻辑判断：v-if、v-else、v-if-else:

<template>
  <div v-if="seen">
    <p>现在你看到我了</p>
    <div v-if="ok">
      <h1>跟着菜鸟教程学习vue</h1>
      <p>学的不是技术，是情怀</p>
      <p>哈哈哈，mac打字不太习惯</p>
    </div>
    <!--><h1>{{ msg }}</h1><!-->
    ---------------------------------
    if--else
    <div v-if="Math.random()>0.5">sorry</div>
    <div v-else>not sorry</div>v--else
    <div v-if="type=='a'">a</div>
    <div v-if="type=='b'">b</div>
    <div v-if="type=='c'">c</div>
    <!-->  over<!-->
  </div>
</template>
<script>
import { truncate } from "fs";
export default {
  name: "testif",
  data() {
    return {
      seen: true,
      //msg: "test",
      ok: true,
      type: "c"
    };
  }
};
</script>

v-for遍历:

<template >
  <div>
    <div v-for=" item in sites ">
      <li>{{item.name}}</li>
      <li>---------</li>
    </div>
  </div>
</template>
<script>
export default {
  name: "v-if",
  data() {
    return {
      sites: [{ name: "goolge" }, { name: "baidu" }, { name: "cnlinfo" }]
    };
  }
};
</script>

当然还有v-on也就是js中常见的click，简写@click，看到这种勿惊慌。