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: #;

  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, );

    }

  }

};

</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，看到这种勿惊慌。

巴特西

vue语法概要二

最新文章

热门文章