3 vue之插值语法、文本指令、事件指令+案例
一、vue之插值语法
语法：
"en"> "UTF-8">插值 "box">
- 字符串：{{name}}
- 数值：{{age}}
- 数组：{{list1}}
- 对象：{{obj1}}
- 字符串：{{link1}}
- 运算：{{10+20+30+40}}
- 三目运算符：{{10>20?'是':'否'}}
"en"> "UTF-8">插值语法 插值语法
"app">我的名字是:{{name}}
我的年龄是：{{age}}
我的爱好是：{{hobby}}
显示对象：{{obj}}
{{url}}
默认情况，原封不动显示，如果能直接渲染成标签，说明存在漏洞 xss攻击
二、Vue之文本指令
指令就是写在标签上以 v-xx 开头的都是vue的指令，有特殊含义，做一些处理
v-html:把标签字符串显示成标签
v-text：等同于插值
v-show：显示不显示，不是真正删除
v-if：显示不显示，是真正的删除
v-html
指令写在标签内，指令对应的变量，直接写就可以了，不需要再用 {{}} 包裹了
"en"> "UTF-8">v-html "app"> {{link}}
文本指令之v-html: "link">
v-text
"en"> "UTF-8">v-html "app">
文本指令之v-text: "msg">
v-show
一个标签是否显示,用变量可以，用true或false也可以， 其实是display: none;并不是真正的把dom删除了
"en"> "UTF-8">v-html "app">
文本指令之v-show: "b">我是span
v-if
真正的删除，效率低
"en"> "UTF-8">v-html "app">
文本指令之v-if: if="b">我是span
三、vue之事件指令
使用最多的是click事件
v-on:click 可以缩写成@click
"en"> "UTF-8">事件指令 事件指令
"app"> v-on表示事件指令，click表示单击,老语法，不用了
新语法，以后都用这种： @click='函数名'
四、案例
点击后显示和不显示div
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-htmltitle>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">script>
head>
<body>
<div id="app">
<button class="button btn-danger" v-on:click="handleClick">点我显示和不显示divbutton>
<div v-show="show">我是divdiv>
div>
body>
<script>
let vm = new Vue({
el: '#app', // 在box这个div中可以写 vue的语法
data: {
show:true
},
methods:{
handleClick(){
this.show = !this.show
},
}
})
script>
html>