vue语法概要二_html-js-css

概述函数用途类别 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-h

函数	用途	类别
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>