v-test , v-html
<body>
<div id="app">
{{msg}}
<div v-text="test"></div>
<div v-html="test"></div>
<h1 v-bind:title="title" v-bind:class="{red:isred}" v-bind:style="{color:'blue'}"> 111</h1>
<img v-bind:src="src[num]" width="200px" alt="asdsd" v-bind:title="title">
<button v-on:click="change()">点击更换图片</button>
</div>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app", // 指定Vue实例挂载的DOM元素，这里是id为"app"的元素
data() {
return {
msg: "hello world", // 定义一个数据属性msg，初始值为"hello world"
test: "<a href='https://www.baidu.com'>点击跳转百度</a><a href='https://www.baidu.com'>点击跳转百度</a>", // 定义一个数据属性test，包含两个百度链接的HTML代码
title: "你好啊", // 定义一个数据属性title，初始值为"你好啊"
src: ["https://www.baidu.com/img/bd_logo1.png?where=super",
"https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg",
"https://img.shetu66.com/2023/08/02/1690966649671884.png"], // 定义一个数据属性src，包含三个图片链接的数组
num: 0, // 定义一个数据属性num，初始值为0，用于记录当前显示的图片索引
red: "red", // 定义一个数据属性red，值为"red"，用于CSS样式
isred: true // 定义一个数据属性isred，初始值为true，用于控制样式显示
}
},
methods: {
change() {
//1-3随机数
var num = Math.floor(Math.random() * 3);
// this.src[0] = this.src[num];
this.title = "图片已更换"
console.log(num);
this.num = num;
}
},
})
</script>
浙公网安备 33010602011771号