<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>十个指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--注意：1.不能用关键字给变量命名，比如if、else、elseif等都不可以使用；
2.如何区分v-show与v-if：如果需要频繁切换使用元素时使用v-show，否则用v-if
-->
<!--①v-text作用相当于双括号法{{}}，用于显示文本内容-->
<p v-text="txt"></p>
<!--②v-html可解析并渲染包含的标签-->
<p v-html="htm"></p>
<!--③v-show控制元素的display属性，取值为true/false-->
<p v-show="show">我的值为true</p>
<p v-show="hide">我的值为false</p>
<!--④v-if控制元素是否被渲染出来，取值为true/false-->
<p v-if="if_true">如果值为true</p>
<p v-if="if_false">如果值为false</p>
<!--⑤v-else与v-if成对出现-->
<p v-if="if_true">if成立</p>
<p v-else-if="elseif_true">else if成立 </p>
<p v-else="else_true">else成立</p>
<!--⑥v-for可用于显示数组、对象、整数-->
<span v-for="item in list">{{item}} </span><br>
<span v-for="(item,index) in list">{{index+1}}.{{item}} </span><br><br>
<!--⑦v-on绑定事件，可以指定事件的处理函数--->
<button v-on:click="ck" >点我有惊喜</button>
<br><br>
<!--⑧v-model帮组我们实现表单与数据的双向绑定-->
<input type="text" v-model="mod">
<p>你的输入：{{mod}}</p>
<!--⑨v-bind用于绑定DOM元素的属性-->
<a v-bind:href="link">百度一下</a><br><br>
<!--⑩v-once使得元素只被渲染一次-->
<input type="text" v-model="num">
<p v-once>你的输入：{{num}}</p>
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
txt:"My name is liuting",
htm:"<strong>I am a student</strong>",
show:true,
hide:false,
if_true:true,
if_false:false,
if_true:false,
elseif_true:true,
else_true:false,
list:['liuting','liurui','liuwenhua'],
mod:'',
link:"https://www.baidu.com",
num:324325,
},
methods:{
ck(){
console.log("魔镜魔镜，我是不是世界上最帅的小伙！");
},
},
});
</script>
</html>
【vue.js】vue的十个常用指令
猜你喜欢
转载自blog.csdn.net/weixin_39068791/article/details/81369159
今日推荐
周排行