vue语法概要二

Posted 2022-06-14 c546170667

函数	用途	类别
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，看到这种勿惊慌。