织梦书法网站模板百度竞价点击一次多少钱
一、内容渲染指令
1.v-text：操作纯文本，用于更新标签包含的文本，但是使用不灵活，无法拼接字符串，会覆盖文本，可以简写为{{}}，{{}}支持逻辑运算。
用法示例：
//把name对应的值渲染到第一个标签中
<p v-text="name"></p>
<p>{{name}}</p>2.v-html：用于操作html标签，会将其当html标签解析后输出
<body><div id="app"><p v-html="name"></p></div><script type="text/javascript">let app=new Vue({el:"#app",data:{name:"<strong>Zhangsan</strong>"} })</script>
</body>二、属性绑定指令
1.v-bind：动态属性绑定，属性值可以是src，title，class，href等，bind的属性对应data中的变量，简写是:
用法示例
<el-form v-bind:model="dataForm"></el-form>
<el-form :model="dataForm"></el-form>三、事件绑定指令
1.v-on：可以绑定事件的监听器,简写是@
用法示例：
<button @click="add"></button>四、双向绑定指令
1.v-model：通常用于表单的组件绑定，例如input、select等。它用于实现表单组件的双向绑定，表单控制件以外的标签没有用
用法示例：
<el-form-item label="姓名" prop="name" }"><el-input v-model="dataForm.name" placeholder="输入姓名" clearable ></el-input>
</el-form-item>五、条件渲染指令
1.v-show：指令的取值为true/false，分别对应着显示/隐藏。原理：动态为元素添加或移除 display：none样式，来实现元素的显示和隐藏；如果要频繁的切换元素的显示状态，用v-show会更好 。
2.v-if：取值为true/false，控制元素是否需要被渲染(展示)。原理：每次动态创建或移除元素，实现元素的显示和隐藏；如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好。
3.v-else：和v-if指令搭配使用，没有对应的值，当v-if的值为false时，v-else才会被渲染出来。
v-if可以单独使用，或者配合v-else指令一起使用：
<div v-if="Math.random()>10">随机数大于10
</div>
<div v-else>随机数小于10
</div>
注意：v-else指令配合v-if使用才会被识别。