vue常用指令

v-once: 只会执行一次渲染，当数据发生改变时，不会再变化

<div id="app">
    <p v-once>{{msg}}</p>
    <input v-model="msg" type="text" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            msg:'今天气温'
        }
    })
</script>

v-html:解析HTML标签，渲染普通文本

<body>
	<div id="app">
		<h2 v-html="msg1"></h2>
		<h2 v-html="msg2"></h2>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var	app= new Vue({
		el:'#app',
		data:{
			msg1: '我是msg1',
			msg2: '<h3>我是msg2</h3>'
		}
	})
</script>

v-text: 用于渲染普通文本，但不能解析HTML标签

<body>
    <div id="app">
        <h2 v-text="msg1"></h2>
        <h2 v-text="msg2"></h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg1: '我是msg1',
            msg2: '<span>我是msg2</span>'
        }
    })
</script>

{{ }} 模板语法：不能识别HTML标签

<body>
    <div id="app">
        <h2>{{msg1}}</h2>
        <h2>{{msg2}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg1: '我是msg1',
            msg2: '<span>我是msg2</span>'
        }
    })
</script>

v-model：双向绑定，可以实现表单元素和Medel中数据的双向绑定

<body>
    <div id="app">
        <input type="text" v-model="msg" />
        <h2>{{msg}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
    el: '#app',
    data: {
        msg: ''
    }
        })
</script>

v-bind: 绑定属性,比如:title，:class

<body>
    <div id="app">
        <h2 v-bind:title="msg">{{msg}}</h2>
        <input type="text" v-model="msg" />
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
      	  msg: 'Hello Vue!'
        }
    })
</script>

v-on: 监听 DOM事件

<body>
	<div id="app">
		<h2 v-on:click="run">{{msg}}</h2>
		<!-- 简写形式 -->
		<!-- <h2 @click="run"></h2> -->
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue! 点击我'
    },
    methods: {
      run: function() {
      alert('Hello')
      }
    }
  })
</script>

v-if:条件成立渲染，条件不成立就不会渲染这个元素

<body>
<div id="app">
  <h2 v-if="num > 10">num大于10我就出现</h2>
  <h2 v-else-if="num < 10">num小于10我就出现</h2>
  <h2 v-else>你上边两条都不好使</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    num: 11
  }
})
</script>

v-show：简单的切换元素中的属性 display，如果条件不成立就会自动隐藏 display;none;

<body>
  <div id="app">
    <h2 v-show="num < 10">num小于10我就出现</h2>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      num: 9
    }
    })
</script>

v-for：循环语句

<body>
  <div id="app">
    <p v-for="a in msg">{{a.name}}----{{a.sex}}-----{{a.age}} </p>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
    msg: [{
      name: "张三",
      sex: "女",
      age: "20"
    },
    {
      name: "李四",
      sex: "男",
      age: "18"}]
    }
  })
</script>

__EOF__

本文作者：一只小狐疑
本文链接：https://www.cnblogs.com/Huyi-1208/p/16388580.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   一只小狐疑  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
·  vue结合axios：get、post
·  微信小程序使用vant-weapp
·  vue常用指令
·  Vue常用指令（精简）
·  vue常用指令
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示
AI IDE Trae