测试基础 VUE-模版语法

tongyuruo · 2020年03月13日 · 1227 次阅读

1、文本插入{{}}
里面的值支持
(1) 文本

{{hello world}}

(2) 数字

{{123}}

(3) 逻辑运算

{{1+1}}

(4) 单行语句

<p>{{0>10 ? 'false':'true'}}</p>

2、v-html/v-text 指令:动态文本输出(v-html 能解析 html)

<p v-html="hello"></p>

3、v-bind:动态属性,例如 class 等 v-bind:class="ha"

4、v-if v-else 表示 if,else,可用 template 标签承载,例如:

<template v-if> ”,<template v-else> 

5、v-show:和 v-if 类似。但是与 v-if 的区别是元素全部被渲染,这是做了 css 的切换。

6、v-for:列表渲染, 一定要添加 key

 <ul>
    <li v-for="(name,index) in names" v-bind:key="index">{{ name }}--{{index}}</li>
 </ul>
names: ["anna","dana","timiy"]

渲染列表,列表里面是 json

 <ul>
          <li v-for="index in indexs" >
            {{ index.age}}
            {{index.name}}
          </li>
</ul>

indexs: [
        {
          "name": "anna",
          "age": 10
        },
        {
          "name": "dana",
          "age": 100
        }
 ]

7、事件 v-on ,用于点击等操作

<button v-on:click="num+=1">按钮</button>
<span>{{num}}</span>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      num: 1
    }
  }
}
</script>

8、v-on 事件 methods 事件处理方法

<button v-on:click="handlerClick">按钮</button>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      num: 1
    }
  }
methods: {
    handlerClick(){
      alert("我是事件处理方法:" + this.num)
    }
  }
}
</script>

9、用 this 来索引当天 data 中的数据,this 是 vue 的组件,包含了组件的所有属性。

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册