Vue—指令v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-on

逃离我推掉我的手 2023-06-06 03:41 102阅读 0赞

1.v-text(文本插值)

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id="app">
  7.             <span v-html ="vtext"></span>
  8.             <span>{
  9.    {vtext}}</span>
  10.     </div>
  11. </body>
  12. </html>
  13. <script>
  14.     var vm = new Vue({
  15.         el: '#app',
  16.         data: {
  17.             vtext : 'aaa',
  18.             vhtml : '<span>{
  19.    {vtext}}</span>',
  20.         }
  21.     })
  22. </script>

可以使用{ {}}代替v-text

2.v-html(普通HTML插入)

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id="app">
  7.             <span>{
  8.    {vtext}}</span>
  9.             <div v-html="vhtml"></div>
  10.     </div>
  11. </body>
  12. </html>
  13. <script>
  14.     var vm = new Vue({
  15.         el: '#app',
  16.         data: {
  17.             vtext : 'aaa',
  18.             vhtml : '<span>aaa</span>',
  19.         }
  20.     })
  21. </script>

3.v-show(显示或隐藏标签)

有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id="app">
  7.             <h1 v-if="awesome">Vue is awesome!</h1>
  8.     </div>
  9. </body>
  10. </html>
  11. <script>
  12.     var vm = new Vue({
  13.         el: '#app',
  14.         data: {
  15.             vshow : false,
  16.         }
  17.     })
  18. </script>

4.v-if、v-else、v-else-if(表达式的值的真假条件渲染元素)

说明：

  1.   v-if、v-else、v-else-if指令用于条件性地渲染DOM,当结果是假时Dom不会生成, 而v-show只是简单地切换元素的CSS属性display。 
  3.   v-else元素必须紧跟在带v-if或者v-else-if 的元素的后面，否则它将不会被识别。  
  6. <html>
  7. <head>
  8.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <!-- 单独使用v-if -->
  13.         <h1 v-if="vif">中国</h1>      
  14.         <!-- 使用v-if和v-else   v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。-->
  15.         <h1 v-if="vif2">中国</h1>
  16.         <h1 v-else>其他</h1>
  17.         <!-- 使用v-if、v-else-if和v-else组合使用 -->
  18.         <h1 v-if="type == '中国'">中国</h1>
  19.         <h1 v-else-if="type == '美国'">美国</h1>
  20.         <h1 v-else-if="type == '俄罗斯'">俄罗斯</h1>
  21.         <h1 v-else>其他</h1>
  22.     </div>
  23. </body>
  24. </html>
  25. <script>
  26.     var vm = new Vue({
  27.         el: '#app',
  28.         data: {
  29.             vif : true,
  30.             vif2:false,
  31.             type:'日本'
  32.         }
  33.     })
  34. </script>

5.v-for(基于源数据多次渲染元素)

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id="app">
  7.         <ul>
  8.             <li v-for="item in vfors">
  9.                 {
  10.    { item.message }}
  11.             </li>
  12.         </ul>
  13.         <ul>
  14.             <li v-for="(item,index) in vfors">
  15.                 {
  16.    { index + "." +item.message }}
  17.             </li>
  18.         </ul>
  19.     </div>
  20. </body>
  21. </html>
  22. <script>
  23.     var vm = new Vue({
  24.         el: '#app',
  25.         data: {
  26.             vfors : [
  27.                     { message: 'Foo' , id = 1 },
  28.                     { message: 'Bar' , id = 2 }
  29.                     ],
  30.         }
  31.     })
  32. </script>

可以用of替代in作为分隔符

  1. <ul>
  2. <li v-for="item of vfors">
  3.     {
  4.    { item.message }}
  5. </li>
  6. </ul>

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

如果需要重新排序现有元素，就必须提供一个唯一key属性

  1. <ul>
  2.     <li v-for="item in vfors" v-bind:key="item.id">
  3.         {
  4.    { item.message }}
  5.     </li>
  6. </ul>

6.v-on(绑定事件监听器)

v-on既能监听原生DOM事件，也可以监听自定义组件触发的自定义事件。

v-on缩写为@ 

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id="app">
  7.         <!-- v-on绑定点击事件 -->
  8.         <button v-on:click="click1">v-on绑定点击事件</button>
  9.         <!-- v-on缩写 -->
  10.         <button @click="click1">v-on缩写</button>
  11.         <!-- 传参 -->
  12.         <button @click="click2('bbbbb')">传参bbbbb</button>
  13.     </div>
  14. </body>
  15. </html>
  16. <script>
  17.     var vm = new Vue({
  18.         el: '#app',
  19.         methods:{
  20.             click1:function(){
  21.                 alert("aaaaa");
  22.             },
  23.             click2:function(value){
  24.                alert(value);
  25.             }
  26.         }
  27.     })
  28. </script>

7.v-bind(动态地绑定特性)

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id="app">
  7.         <!-- v-bind绑定href -->
  8.         <a v-bind:href="url" target="_blank">{
  9.    {url}}</a><br/>
  10.         <!-- v-bind缩写： -->
  11.         <a :href="url" target="_blank">v-bind缩写：</a><br/>
  12.         <!-- 绑定内联样式style  -->
  13.         <span :style="styleobj">绑定内联样式style：</span><br/>
  14.         <!-- 绑定class  -->
  15.         <span :class=" { classObj : isclassObj }">绑定class：</span><br/>
  16.     </div>
  17. </body>
  18. </html>
  19. <style >
  20.     .classObj {
  21.         color: red;
  22.         font-size: 50px;
  23.     }
  24. </style>
  25. <script>
  26.     var vm = new Vue({
  27.         el: '#app',
  28.         data:{
  29.             url : "http://www.baidu.com",
  30.             styleobj:{
  31.                 color:'red',
  32.             },
  33.             isclassObj:true,
  34.         }
  35.     })
  36. </script>

8.v-model(数据双向绑定)

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id="app">
  7.             <input v-model="message" placeholder="edit me">
  8.             <p>message is: {
  9.    { message }}</p><br/>
  11.             <input type="checkbox" v-model="checked">
  12.             <label for="checkbox">{
  13.    { checked }}</label><br/>
  15.             <select v-model="selected">
  16.                 <option>A</option>
  17.                 <option>B</option>
  18.                 <option>C</option>
  19.             </select>
  20.             <span>Selected: {
  21.    { selected }}</span><br/>
  22.     </div>
  23. </body>
  24. </html>
  25. <script>
  26.     var vm = new Vue({
  27.         el: '#app',
  28.         data:{
  29.             message : "aaaaaa",  //初始值
  30.             checked:true,
  31.             selected:'C',
  32.         }
  33.     })
  34. </script>

9.v-slot

10.v-pre

11.v-cloak

12.v-once

只渲染元素和组件一次。随后的不在重新渲染。

  1. <span v-once>This will never change: {
  2.    {msg}}</span>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，102人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue指令

    一、Vue指令的规定 1. 所有的Vue指令必须以v-开头，后面带命令动词。 2. 指令的参数：v-指令动词.参数 3. 指令的修饰符：v-指令动词:修饰符 二

    阳光穿透心脏的1/2处阳光穿透心脏的1/2处/ 0 赞/ 117 阅读

    相关 Vue指令

    v-text v-text的作用跟插值表达式是一样的，但是不同的地方在于：v-text会覆盖元素中原本的内容，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

    男娘i男娘i/ 0 赞/ 116 阅读

    相关 vue指令

    总结 v-text v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染

    电玩女神电玩女神/ 0 赞/ 121 阅读

    相关 vue指令

    vue指令 一个正在努力爱好运动的前端 座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 -------------------- 文章目录

    朱雀朱雀/ 0 赞/ 223 阅读

    相关 Vue指令

    Vue指令 1. watch监听 在vue中watch就是时时刻刻的监听绑定的这个data模型数据，当这个数据发生变化的时候，watch就会被触发，自动的执行其中的

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 636 阅读